final dump 2020-12-14

1 files changed, 35 insertions, 35 deletions

diff --git a/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html
index 1278783254..e49f1183b8 100644
--- a/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html
+++ b/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html
@@ -22,7 +22,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 
 <div id="onedtwod">
 <div class="hidden">
-<pre class="brush: css">* {box-sizing: border-box;}
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
 
 .wrapper {
     border: 2px solid #f76707;
@@ -40,7 +40,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 </pre>
 </div>
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
    &lt;div&gt;One&lt;/div&gt;
    &lt;div&gt;Two&lt;/div&gt;
    &lt;div&gt;Three&lt;/div&gt;
@@ -49,7 +49,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 &lt;/div&gt;
 </pre>
 
-<pre class="brush: css">.wrapper {
+<pre class="brush: css notranslate">.wrapper {
    display: flex;
    flex-wrap: wrap;
 }
@@ -65,13 +65,13 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 
 <p>Общий вопрос заключается в том, как заставить наши перебежавшие элементы выравняться по элементам сверху. Как раз в этом случае и нужен метод размещения элементов в двумерной системе: требуется выравнивание и по строке, и по колонке, а для этого на помощь спешит Grid.</p>
 
-<h3 id="Те_же_яйца_вид_в_профиль_тот_же_макет_но_с_CSS_гридами">Те же яйца, вид в профиль: тот же макет, но с CSS гридами</h3>
+<h3 id="Тот_же_макет_но_с_CSS_гридами">Тот же макет, но с CSS гридами</h3>
 
-<p>В примере ниже мы создаем тот же самый макет, но используя гриды. На этот раз у нас три трека-колонки шириной в <code>1fr</code> . И при этом нам не требуется задавать какие-либо свойства дочерним элементам, потому что они самостоятельно занимают по одной ячейке созданного грида. Как Вы видите, наши элементы лежат в жесткой сетке и выравниваются и по строке, и по колонке. Поскольку у нас пять элементов, в результате мы получаем пустую ячейку в конце второй строки. </p>
+<p>В примере ниже мы создаем тот же самый макет, но используя гриды. На этот раз у нас три трека-колонки шириной в <code>1fr</code> . И при этом нам не требуется задавать какие-либо свойства дочерним элементам, потому что они самостоятельно занимают по одной ячейке созданного грида. Как видите, наши элементы лежат в жесткой сетке и выравниваются и по строке, и по колонке. Поскольку у нас пять элементов, в результате мы получаем пустую ячейку в конце второй строки. </p>
 
 <div class="Two_Dimensional_With_Grid">
 <div class="hidden">
-<pre class="brush: css">* {box-sizing: border-box;}
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
 
 .wrapper {
     border: 2px solid #f76707;
@@ -89,7 +89,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 </pre>
 </div>
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
    &lt;div&gt;One&lt;/div&gt;
    &lt;div&gt;Two&lt;/div&gt;
    &lt;div&gt;Three&lt;/div&gt;
@@ -98,7 +98,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 &lt;/div&gt;
 </pre>
 
-<pre class="brush: css">.wrapper {
+<pre class="brush: css notranslate">.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
 }
@@ -107,11 +107,11 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 <p>{{ EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170') }}</p>
 </div>
 
-<p>Если Вы колеблетесь, что выбрать - flexbox или грид, задайте себе простой вопрос:</p>
+<p>Если Вы колеблетесь, что выбрать - flexbox или grid, задайте себе простой вопрос:</p>
 
 <ul>
- <li>мне нужно управлять размещением элементов в строке <u>или </u>в колонке - окей, нужен flexbox</li>
- <li>мне нужно управлять размещением элементов <u>и </u>в строке, <u>и </u>в колонке – окей, нужен грид</li>
+ <li>нужно управлять размещением элементов в строке <em><u>или</u></em> в колонке - используем flexbox</li>
+ <li>нужно управлять размещением элементов в строке <em><u>и</u></em> в колонке – используем grid</li>
 </ul>
 
 <h3 id="Что_важнее_контент_или_макет">Что важнее: контент или макет?</h3>
@@ -133,7 +133,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 <p>В первом примере, использующем flexbox, у нас есть контейнер с тремя элементами. Для блока-обертки wrapper установлено свойство {{cssxref("min-height")}}, и оно задает высоту flex-контейнера. Мы установили свойство {{cssxref("align-items")}} flex-контейнера в значение <code>flex-end</code> , поэтому элементы выравниваются по концу flex-контейнера. Мы также установили значение свойства {{cssxref("align-self")}} для <code>box1</code>  таким образом, что оно перезапишет поведение по умолчанию и заставит наш блок растянутся на всю высоту контейнера. Для <code>box2</code> свойство {{cssxref("align-self")}} установлено таким образом, что блок перепрыгнет в начало flex-контейнера.</p>
 
 <div class="hidden">
-<pre class="brush: css">* {box-sizing: border-box;}
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
 
 .wrapper {
     border: 2px solid #f76707;
@@ -151,14 +151,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 </pre>
 </div>
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
    &lt;div class="box1"&gt;One&lt;/div&gt;
    &lt;div class="box2"&gt;Two&lt;/div&gt;
    &lt;div class="box3"&gt;Three&lt;/div&gt;
 &lt;/div&gt;
 </pre>
 
-<pre class="brush: css">.wrapper {
+<pre class="brush: css notranslate">.wrapper {
    display: flex;
    align-items: flex-end;
    min-height: 200px;
@@ -178,7 +178,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 <p>Второй пример использует грид, чтобы создать тот же самый макет, и на этот раз мы рассмотрим то, как свойства выравнивания блоков применяются к гридам. Вместо <code>flex-start</code> и <code>flex-end</code> мы задаем <code>start</code> и <code>end</code> . В случае с макетом на гридах мы выравниваем элементы внутри их грид-области, в данном примере - это одна единственная грид-ячейка, но в целом грид-область может состоять из нескольких грид-ячеек.</p>
 
 <div class="hidden">
-<pre class="brush: css">* {box-sizing: border-box;}
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
 
 .wrapper {
     border: 2px solid #f76707;
@@ -196,14 +196,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 </pre>
 </div>
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
    &lt;div class="box1"&gt;One&lt;/div&gt;
    &lt;div class="box2"&gt;Two&lt;/div&gt;
    &lt;div class="box3"&gt;Three&lt;/div&gt;
 &lt;/div&gt;
 </pre>
 
-<pre class="brush: css">.wrapper {
+<pre class="brush: css notranslate">.wrapper {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    align-items: end;
@@ -233,7 +233,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 <p>В примере ниже мы используем ключевое слово <code>auto-fill</code> вместо целого числа в repeat-нотации и задаем структуру треков размером в 200 пикселей. Это значит, что грид создаст столько треков-колонок размером в 200 пикселей, сколько их может разместиться в контейнере.</p>
 
 <div class="hidden">
-<pre class="brush: css">* {box-sizing: border-box;}
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
 
 .wrapper {
     border: 2px solid #f76707;
@@ -251,14 +251,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 </pre>
 </div>
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
    &lt;div&gt;One&lt;/div&gt;
    &lt;div&gt;Two&lt;/div&gt;
    &lt;div&gt;Three&lt;/div&gt;
 &lt;/div&gt;
 </pre>
 
-<pre class="brush: css">.wrapper {
+<pre class="brush: css notranslate">.wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, 200px);
 }
@@ -271,7 +271,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 <p>Давайте вспомним пример с flexbox, когда элементы, размер которых больше 200 пикселей, переходят на новую строку. Тот же самый эффект в гридах мы можем получить комбинируя <code>auto-fill</code> и функцию {{cssxref("minmax", "minmax()")}}. В примере ниже мы создаем автозаполненные треки с помощью <code>minmax</code>. Мы хотим, чтобы треки были как минимум 200 пикселей в ширину, это наше минимальное значение, а для максимального зададим <code>1fr</code>. В процессе, когда браузер вычисляет, сколько блоков в 200 пикселей может разместиться в контейнере - при этом учитывая грид-зазоры - он расценивает максимум <code>1fr</code> как инструкцию распределить оставшееся свободное пространство между этими блоками.</p>
 
 <div class="hidden">
-<pre class="brush: css">* {box-sizing: border-box;}
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
 
 .wrapper {
     border: 2px solid #f76707;
@@ -289,14 +289,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 </pre>
 </div>
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
    &lt;div&gt;One&lt;/div&gt;
    &lt;div&gt;Two&lt;/div&gt;
    &lt;div&gt;Three&lt;/div&gt;
 &lt;/div&gt;
 </pre>
 
-<pre class="brush: css">.wrapper {
+<pre class="brush: css notranslate">.wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 }
@@ -317,7 +317,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 <p>В примере ниже у нас есть блок-обертка с четырьмя дочерними элементами. Третий элемент абсолютно позиционирован и одновременно размещен в гриде с помощью привязки к грид-линиям. У грид-контейнера <code>position:</code> <code>relative</code> , поэтому он становится контекстом позиционирования для нашего третьего элемента.</p>
 
 <div class="hidden">
-<pre class="brush: css">* {box-sizing: border-box;}
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
 
 .wrapper {
     border: 2px solid #f76707;
@@ -335,7 +335,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 </pre>
 </div>
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
    &lt;div class="box1"&gt;One&lt;/div&gt;
    &lt;div class="box2"&gt;Two&lt;/div&gt;
    &lt;div class="box3"&gt;
@@ -346,7 +346,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 &lt;/div&gt;
 </pre>
 
-<pre class="brush: css">.wrapper {
+<pre class="brush: css notranslate">.wrapper {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-auto-rows: 200px;
@@ -385,7 +385,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 <p>Задаем <code>.box3</code> свойство position в значении relative и затем перемещаем наш под-элемент с помощью свойств сдвига.  В данном случае контекстом позиционирования является грид-область.</p>
 
 <div class="hidden">
-<pre class="brush: css">* {box-sizing: border-box;}
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
 
 .wrapper {
     border: 2px solid #f76707;
@@ -403,7 +403,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 </pre>
 </div>
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
    &lt;div class="box1"&gt;One&lt;/div&gt;
    &lt;div class="box2"&gt;Two&lt;/div&gt;
    &lt;div class="box3"&gt;Three
@@ -415,7 +415,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 &lt;/div&gt;
 </pre>
 
-<pre class="brush: css">.wrapper {
+<pre class="brush: css notranslate">.wrapper {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-auto-rows: 200px;
@@ -453,7 +453,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 
 <div id="Display_Contents_Before">
 <div class="hidden">
-<pre class="brush: css">* {box-sizing: border-box;}
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
 
 .wrapper {
     border: 2px solid #f76707;
@@ -477,7 +477,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 </pre>
 </div>
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
    &lt;div class="box box1"&gt;
        &lt;div class="nested"&gt;a&lt;/div&gt;
        &lt;div class="nested"&gt;b&lt;/div&gt;
@@ -490,7 +490,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 &lt;/div&gt;
 </pre>
 
-<pre class="brush: css">.wrapper {
+<pre class="brush: css notranslate">.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100px, auto);
@@ -509,7 +509,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 
 <div id="Display_Contents_After">
 <div class="hidden">
-<pre class="brush: css">* {box-sizing: border-box;}
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
 
 .wrapper {
     border: 2px solid #f76707;
@@ -533,7 +533,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 </pre>
 </div>
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
    &lt;div class="box box1"&gt;
        &lt;div class="nested"&gt;a&lt;/div&gt;
        &lt;div class="nested"&gt;b&lt;/div&gt;
@@ -546,7 +546,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 &lt;/div&gt;
 </pre>
 
-<pre class="brush: css">.wrapper {
+<pre class="brush: css notranslate">.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100px, auto);