FIx more live examples (#2774)

4 files changed, 15 insertions, 15 deletions

diff --git a/files/ru/web/css/css_grid_layout/grid_template_areas/index.html b/files/ru/web/css/css_grid_layout/grid_template_areas/index.html
index 830df019a4..8070f107f2 100644
--- a/files/ru/web/css/css_grid_layout/grid_template_areas/index.html
+++ b/files/ru/web/css/css_grid_layout/grid_template_areas/index.html
@@ -152,7 +152,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области
     <div class="footer">Footer</div>
 &lt;/div&gt;</pre>
 
-<p>{{ EmbedLiveSample('Leaving_a_grid_cell_empty', '300', '330') }}</p>
+<p>{{ EmbedLiveSample('Оставляем_ячейку_пустой', '300', '330') }}</p>
 
 <p>Чтобы сделать наш макет чище, мы можем использовать множество символов <code>.</code>. Если между точками нет пробелов, то они считаются одной ячейкой. В комплексных макетах подобная возможность помогает аккуратно выравнивать строки и колонки. То есть, вы прямо в CSS можете видеть, как выглядит ваш макет.</p>
 
@@ -217,7 +217,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области
 &lt;/div&gt;</pre>
 </div>
 
-<p>{{ EmbedLiveSample('Spanning_multiple_cells', '300', '330') }}</p>
+<p>{{ EmbedLiveSample('Охватываем_несколько_ячеек', '300', '330') }}</p>
 
 <p>Значение {{cssxref("grid-template-areas")}} должно отображать законченный грид, а иначе оно невалидно (и игнорируется!). Это значит, что у вас должно быть одинаковое количество ячеек в каждой строке, а если какая-то ячейка должна быть пустой, то вместо имени в ней должна быть точка. Грид будет также невалидным, если области в нем не прямоугольные.</p>
 
@@ -304,7 +304,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области
 &lt;/div&gt;</pre>
 </div>
 
-<p>{{ EmbedLiveSample('Redefining_the_grid_using_media_queries', '550', '330') }}</p>
+<p>{{ EmbedLiveSample('Переопределение_грида_с_медиавыражениями', '550', '330') }}</p>
 
 <h2 id="Использование_grid-template-areas_для_элементов_UI">Использование <code>grid-template-areas</code> для элементов UI</h2>
 
diff --git a/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
index 4d95530d74..a065b309a8 100644
--- a/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
+++ b/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
@@ -364,7 +364,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines
 
 <p>Если вы работаете со строгим макетом из нескольких столбцов, например, демонстрация именованных строк в последней части этого руководства работает очень хорошо. Если вы рассматриваете сеточные системы, в таких фреймворках, как Foundation или Bootstrap, которые основаны на сетке из 12 столбцов. Затем фреймворк импортирует код для выполнения всех вычислений, чтобы убедиться, что столбцы складываются до 100%. С помощью Grid layout единственный код, который нам нужен для нашего грид-фреймворка, - это:</p>
 
-<div class="three_column">
+<div id="three_column">
 <pre class="brush: css">.wrapper {
   display: grid;
   grid-gap: 10px;
diff --git a/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html b/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html
index 8c8713b6b4..4f5efbfe26 100644
--- a/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html
+++ b/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html
@@ -57,7 +57,7 @@ original_slug: >-
 &lt;/div&gt;
 </pre>
 
-<p>{{ EmbedLiveSample('A_basic_example', '300', '330') }}</p>
+<p>{{ EmbedLiveSample('Базовый_пример', '300', '330') }}</p>
 
 <h2 id="Позиционирование_элементов_по_номерам_линий">Позиционирование элементов по номерам линий</h2>
 
@@ -430,7 +430,7 @@ original_slug: >-
 }
 </pre>
 
-<p>{{ EmbedLiveSample('Counting_backwards', '300', '330') }}</p>
+<p>{{ EmbedLiveSample('Считая_с_конца', '300', '330') }}</p>
 
 <h3 id="Как_растянуть_элемент_на_длину_всего_грида">Как растянуть элемент на длину всего грида?</h3>
 
@@ -502,7 +502,7 @@ original_slug: >-
 }
 </pre>
 
-<p>{{ EmbedLiveSample('Gutters_or_Alleys', '300', '350') }}</p>
+<p>{{ EmbedLiveSample('Зазоры_Gutters_или_аллеи_Alleys', '300', '350') }}</p>
 
 <h3 id="Сокращённая_запись_для_грид-зазоров">Сокращённая запись для грид-зазоров</h3>
 
@@ -570,7 +570,7 @@ original_slug: >-
 }
 </pre>
 
-<p>{{ EmbedLiveSample('Using_the_span_keyword', '300', '330') }}</p>
+<p>{{ EmbedLiveSample('Использование_ключевого_слова_span', '300', '330') }}</p>
 
 <p>Ключевое слово  <code>span</code> также можно использовать в качестве значения <code>grid-row-start</code>/<code>grid-row-end</code> и<code>grid-column-start/grid-column-end</code>. Два примера ниже создают одну и ту же грид-область. В первом примере мы задаём начальную строчную линию, а после говорим свойству, отвечающему за конечную линию: эй, мы хотим занять под этот элемент три линии. В итоге, грид-область начинается с первой линии и занимает пространство до 4-ой.</p>
 
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 1d3c710434..fe9d21dcb8 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
@@ -69,7 +69,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 
 <p>В примере ниже мы создаём тот же самый макет, но используя гриды. На этот раз у нас три трека-колонки шириной в <code>1fr</code> . И при этом нам не требуется задавать какие-либо свойства дочерним элементам, потому что они самостоятельно занимают по одной ячейке созданного грида. Как видите, наши элементы лежат в жёсткой сетке и выравниваются и по строке, и по колонке. Поскольку у нас пять элементов, в результате мы получаем пустую ячейку в конце второй строки. </p>
 
-<div class="Two_Dimensional_With_Grid">
+<div id="Two_Dimensional_With_Grid">
 <div class="hidden">
 <pre class="brush: css notranslate">* {box-sizing: border-box;}
 
@@ -171,7 +171,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 }
 </pre>
 
-<p>{{ EmbedLiveSample('Box_alignment', '300', '230') }}</p>
+<p>{{ EmbedLiveSample('Выравнивание_блоков', '300', '230') }}</p>
 
 <h3 id="Тем_временем_в_параллельной_вселенной_выравнивание_в_CSS_Гридах">Тем временем в параллельной вселенной: выравнивание в CSS Гридах</h3>
 
@@ -216,7 +216,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 }
 </pre>
 
-<p>{{ EmbedLiveSample('Alignment_in_CSS_Grids', '200', '310') }}</p>
+<p>{{ EmbedLiveSample('Тем_временем_в_параллельной_вселенной_выравнивание_в_CSS_Гридах', '200', '310') }}</p>
 
 <h3 id="Единица_fr_и_flex-basis">Единица <code>fr</code> и <code>flex-basis</code></h3>
 
@@ -264,7 +264,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 }
 </pre>
 
-<p>{{ EmbedLiveSample('Auto-filling_grid_tracks', '500', '170') }}</p>
+<p>{{ EmbedLiveSample('Автозаполнение_грид-треков', '500', '170') }}</p>
 
 <h3 id="Переменное_количество_треков">Переменное количество треков</h3>
 
@@ -302,7 +302,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 }
 </pre>
 
-<p>{{ EmbedLiveSample('A_flexible_number_of_tracks', '500', '170') }}</p>
+<p>{{ EmbedLiveSample('Переменное_количество_треков', '500', '170') }}</p>
 
 <p>Собственно, теперь у нас есть возможность создавать гриды с переменным количеством или с переменным размером треков и при этом по-прежнему держать элементы в жёсткой сетке из строк и колонок.</p>
 
@@ -364,7 +364,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 }
 </pre>
 
-<p>{{ EmbedLiveSample('A_grid_container_as_containing_block', '500', '330') }}</p>
+<p>{{ EmbedLiveSample('Грид-контейнер_как_контейнерный_блок', '500', '330') }}</p>
 
 <p>Вы видите, что наш элемент занимает область от колоночной грид-линии 2 до колоночной грид-линии 4 и начинается после строчной линии 1. С помощью свойств left и top мы сдвигаем его относительно этой области. В то же время, он изымается из потока так же, как и любой другой элемент с абсолютным позиционированием, поэтому правила авторазмещения теперь помещают другие элементы на его место. Абсолютное позиционирование нашего элемент также не приводит к появлению новой строки.</p>
 
@@ -439,7 +439,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 }
 </pre>
 
-<p>{{ EmbedLiveSample('With_a_grid_area_as_the_parent', '500', '420') }}</p>
+<p>{{ EmbedLiveSample('А_что_если_родительский_элемент_-_это_грид-область', '500', '420') }}</p>
 
 <h2 id="Грид_и_display_contents">Грид и <code>display:</code> <code>contents</code></h2>