diff options
| author | Alexey Pyltsyn <lex61rus@gmail.com> | 2021-10-27 02:31:24 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-10-27 02:31:24 +0300 |
| commit | 980fe00a74a9ad013b945755415ace2e5429c3c2 (patch) | |
| tree | a1c6bb4b302e69bfa53eab13e44500eba55d1696 /files/ru/web/css/css_grid_layout | |
| parent | 374a039b97a11ee7306539d16aaab27fed66b398 (diff) | |
| download | translated-content-980fe00a74a9ad013b945755415ace2e5429c3c2.tar.gz translated-content-980fe00a74a9ad013b945755415ace2e5429c3c2.tar.bz2 translated-content-980fe00a74a9ad013b945755415ace2e5429c3c2.zip | |
[RU] Remove notranslate (#2874)
Diffstat (limited to 'files/ru/web/css/css_grid_layout')
4 files changed, 126 insertions, 126 deletions
diff --git a/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html index 4fd846a256..424d65eae9 100644 --- a/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html +++ b/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -37,7 +37,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>В этом примере есть div, содержащий класс wrapper с пятью потомками</p> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> @@ -48,13 +48,13 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Сделаем wrapper grid контейнером</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; } </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -97,7 +97,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>В примере ниже мы создаём сетку с шириной колонки 200px. Каждый дочерний элемент сетки будет располагаться в отдельной ячейке сетки.</p> <div id="grid_first"> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> @@ -106,14 +106,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: 200px 200px 200px; } </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -143,7 +143,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Размер треков (полос) может быть задан с помощью любой единицы длины. Спецификация также вводит дополнительную единицу длины, позволяющую создавать эластичные (flexible) грид-треки. Новая единица длины <code>fr</code> представляет собой долю (fraction) доступного пространства в грид-контейнере. Определение грида в коде ниже создаст три трека равной длины, которые будут увеличиваться и уменьшаться в размерах в соответствии с доступным пространством.</p> <div id="fr_unit_ls"> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> @@ -152,14 +152,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; } </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -186,7 +186,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>В следующем примере мы создаём грид с треком в <code>2fr</code> и двумя треками по <code>1fr</code>. Доступное пространство разбивается на четыре части. Две части занимает первый трек, и две части - два оставшихся. </p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: 2fr 1fr 1fr; } @@ -194,7 +194,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>В последнем примере смешаем треки с абсолютной длиной и треки с длиной во fr. Размер первого трека 500 пикселей, и эта фиксированная ширина убирается из доступного пространства. Оставшееся пространство разбивается на три части и пропорционально разделяется между двумя эластичными треками.</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: 500px 1fr 2fr; } @@ -204,7 +204,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>В огромных гридах с большим количеством треков можно использовать нотацию <code>repeat()</code> , чтобы повторить структуру треков или её часть. Например, такое задание грида:</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; } @@ -212,7 +212,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>можно записать вот так:</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); } @@ -220,7 +220,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Repeat-нотацию можно использовать как часть списка треков. В следующем примере создаётся грид с начальным треком шириной в 20 пикселей, шестью треками шириной в 1fr и последним треком шириной в 20 пикселей.</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: 20px repeat(6, 1fr) 20px; } @@ -228,7 +228,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Repeat-нотация в качестве аргумента принимает список треков, поэтому с её помощью можно создавать структуру из повторяющихся треков. В следующем примере грид состоит из 10 треков: за треком шириной <code>1fr</code> следует трек шириной <code>2fr</code> , и все это дело повторяется пять раз.</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(5, 1fr 2fr); } @@ -242,7 +242,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>В примере ниже мы задаём <code>grid-auto-rows</code> , чтобы треки, создаваемые в неявном гриде были высотой 200 пикселей.</p> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> @@ -251,7 +251,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; @@ -259,7 +259,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -289,7 +289,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Для подобных ситуаций в Grid предусмотрено решение с помощью функции {{cssxref("minmax", "minmax()")}}. В следующем примере <code>minmax()</code> используется, как значение свойства {{cssxref("grid-auto-rows")}}. Автоматически создаваемые строки будут как минимум 100 пикселей в высоту, а как максимум примут значение <code>auto</code>. Использование <code>auto</code> означает, что размер строки посмотрит на размер контента и растянется таким образом, чтобы вместить самый высокий элемент ячейки в этой строке. </p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); @@ -297,7 +297,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -319,7 +319,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two <p>I have some more content in.</p> @@ -349,7 +349,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Второй элемент начинается с колоночной линии 1 и занимает один трек. Это поведение по умолчанию, поэтому не нужно задавать конечную линию. Элемент также занимает два строчных трека - со строчной линии 3 до строчной линии 5. Остальные элементы самостоятельно размещаются в пустых пространствах грида. </p> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -358,7 +358,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; @@ -377,7 +377,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -419,7 +419,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p><em>Зазоры (Gutters)</em> или аллеи (<em>alleys)</em> между грид-ячейками можно создать с помощью свойств {{cssxref("grid-column-gap")}} и {{cssxref("grid-row-gap")}}, или с помощью сокращённого свойства {{cssxref("grid-gap")}}. В примере ниже мы создаём зазор в 10 пикселей между колонками и в <code>1em</code> между строками.</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 10px; @@ -427,7 +427,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> @@ -437,7 +437,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -468,7 +468,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Грид-элемент может быть и грид-контейнером. В следующем примере у нас есть созданный ранее трёхколоночный грид, в котором размещены два элемента. В данном случае у первого элемента есть несколько подэлементов. Поскольку эти подэлементы не являются прямыми потомками грида, они не участвуют в структуре грида и отображаются в соответствии с нормальным потоком документа.</p> <div id="nesting"> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box box1"> <div class="nested">a</div> <div class="nested">b</div> @@ -485,7 +485,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Если мы задаём для <code>box1</code> значение <code>display: grid</code> , то можем написать для него структуру треков, и он тоже станет гридом, а его дочерние элементы будут размещены внутри этого нового грида.</p> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; @@ -496,7 +496,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -533,7 +533,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>В приведённом выше примере мы можем отредактировать вложенный грид, изменив <code>grid-template-columns: repeat(3, 1fr)</code>, на <code>grid-template-columns: subgrid</code>. Вложенный грид будет использовать родительскую структуру треков, чтобы разместить свои дочерние элементы.</p> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; @@ -548,7 +548,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Несколько грид-элементов могут занимать одну и ту же ячейку. Если вернуться к нашему примеру с элементами, размещёнными по номерам линий, мы можем сделать так, чтобы два элемента перекрывались:</p> <div id="l_ex"> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box box1">One</div> <div class="box box2">Two</div> <div class="box box3">Three</div> @@ -557,7 +557,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; @@ -576,7 +576,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -607,7 +607,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Порядком, в котором элементы накладываются друг на друга, можно управлять с помощью свойства <code>z-index</code> - точно так же, как в случае с позиционированными элементами. Если задать <code>box2</code> значение <code>z-index</code> , меньшее, чем у <code>box1</code> , в стеке он отобразится под элементом <code>box1</code>.</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; @@ -628,7 +628,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </pre> <div class="hidden"> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box box1">One</div> <div class="box box2">Two</div> <div class="box box3">Three</div> @@ -637,7 +637,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; diff --git a/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html index cce90b7f30..ce93888a07 100644 --- a/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html +++ b/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html @@ -41,7 +41,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_1"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -59,7 +59,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; @@ -85,7 +85,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> @@ -104,7 +104,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_2"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -122,7 +122,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; @@ -150,7 +150,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> @@ -189,7 +189,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_3"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -207,7 +207,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; @@ -235,7 +235,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> @@ -256,7 +256,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_4"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -274,7 +274,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; @@ -290,7 +290,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> </div> </pre> @@ -322,7 +322,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_5"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -340,7 +340,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3,100px); @@ -366,7 +366,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> @@ -381,7 +381,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_6"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -399,7 +399,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3,100px); @@ -426,7 +426,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> @@ -441,7 +441,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_7"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -459,7 +459,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3,100px); @@ -486,7 +486,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> @@ -511,7 +511,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_8"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -529,7 +529,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3,100px); @@ -557,7 +557,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> @@ -576,7 +576,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_9"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -594,7 +594,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3,100px); @@ -621,7 +621,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> 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 58b6f849f2..79f92b22e8 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 @@ -24,7 +24,7 @@ original_slug: >- <p><img alt="Our Grid highlighted in DevTools" src="https://mdn.mozillademos.org/files/14663/3_hilighted_grid.png" style="height: 296px; width: 900px;"></p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -42,14 +42,14 @@ original_slug: >- </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -64,7 +64,7 @@ original_slug: >- <p>Мы можем воспользоваться размещением по линиям (line-based placement), чтобы расположить элементы на гриде. Например, нам нужно, чтобы первый элемент начинался от левого края и занимал один трек-колонку. Пусть он также начинается с первой строчной линии, то есть, от верхнего края грида, и занимает пространство до четвёртой строчной линии.</p> <div id="Line_Number"> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; @@ -77,7 +77,7 @@ original_slug: >- <p>Задавая адреса для каждого элемента по отдельности, мы можем разместить все наши четыре элемента по колонкам и строкам. Заметьте, что при желании можно оставить ячейки пустыми. Одна из самых приятных вещей при работе с Grid Layout - возможность создавать негативное пространство (пустые области в макете) без кувырков через голову и прочих хаков.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -98,7 +98,7 @@ original_slug: >- </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -106,7 +106,7 @@ original_slug: >- </div> </pre> -<pre class="brush: css notranslate">.box2 { +<pre class="brush: css">.box2 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; @@ -135,7 +135,7 @@ original_slug: >- <p>Мы написали много кода, чтобы разместить каждый элемент. Неудивительно, что существует <a href="/ru/docs/Web/CSS/Shorthand_properties">краткая форма записи свойств</a>. {{cssxref("grid-column-start")}} и {{cssxref("grid-column-end")}} могут быть объединены в одном {{cssxref("grid-column")}}, а {{cssxref("grid-row-start")}} и {{cssxref("grid-row-end")}} - в {{cssxref("grid-row")}}.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -156,7 +156,7 @@ original_slug: >- </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -164,7 +164,7 @@ original_slug: >- </div> </pre> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column: 1 / 2; grid-row: 1 / 4; } @@ -191,7 +191,7 @@ original_slug: >- <div id="End_Lines"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -212,7 +212,7 @@ original_slug: >- </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -220,7 +220,7 @@ original_slug: >- </div> </pre> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column-start: 1; grid-row-start: 1; grid-row-end: 4; @@ -248,7 +248,7 @@ original_slug: >- <div id="New_Shorthand"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -269,7 +269,7 @@ original_slug: >- </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -277,7 +277,7 @@ original_slug: >- </div> </pre> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column: 1 ; grid-row: 1 / 4; } @@ -310,7 +310,7 @@ original_slug: >- </ul> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -331,7 +331,7 @@ original_slug: >- </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -339,7 +339,7 @@ original_slug: >- </div> </pre> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-area: 1 / 1 / 4 / 2; } .box2 { @@ -375,7 +375,7 @@ original_slug: >- <p>В примере ниже мы "перевернули" определение нашего грида, при размещении элементов задавая линии с конца, то есть, от правого и нижнего краёв.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -396,7 +396,7 @@ original_slug: >- </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -404,7 +404,7 @@ original_slug: >- </div> </pre> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column-start: -1; grid-column-end: -2; grid-row-start: -1; @@ -436,7 +436,7 @@ original_slug: >- <p>Возможность адресовать и первую, и последнюю линии грида становится крайне полезной, если нам нужно растянуть элемент на всю длину грида. Сделать это можно вот так:</p> -<pre class="brush: css notranslate">.item { +<pre class="brush: css">.item { grid-column: 1 / -1; } </pre> @@ -448,7 +448,7 @@ original_slug: >- <p>Зазоры появляются только между треками и не добавляют пространство сверху, снизу, справа или слева грид-контейнеру. Мы можем добавить зазоры в предыдущий пример, дописав эти свойства грид-контейнеру.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -469,7 +469,7 @@ original_slug: >- </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -477,7 +477,7 @@ original_slug: >- </div> </pre> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column: 1 ; grid-row: 1 / 4; } @@ -508,7 +508,7 @@ original_slug: >- <p>Оба свойства также можно записать с помощью свойства-сокращения {{cssxref("grid-gap")}}. Если задать только одно значение, то оно определит размер зазоров и между колонками, и между строками. Если мы задаём два значения, то первое используется для <code>grid-row-gap</code> , а второе - для <code>grid-column-gap</code>.</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); @@ -523,7 +523,7 @@ original_slug: >- <p>В дополнение к возможности обращаться к начальной и конечной линии по их номерам вы можете задать номер начальной линии, а после - количество треков, которые должен занять элемент.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -544,7 +544,7 @@ original_slug: >- </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -552,7 +552,7 @@ original_slug: >- </div> </pre> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column: 1; grid-row: 1 / span 3; } @@ -574,7 +574,7 @@ original_slug: >- <p>Ключевое слово <code>span</code> также можно использовать в качестве значения <code>grid-row-start</code>/<code>grid-row-end</code> и<code>grid-column-start/grid-column-end</code>. Два примера ниже создают одну и ту же грид-область. В первом примере мы задаём начальную строчную линию, а после говорим свойству, отвечающему за конечную линию: эй, мы хотим занять под этот элемент три линии. В итоге, грид-область начинается с первой линии и занимает пространство до 4-ой.</p> -<pre class="notranslate">.box1 { +<pre>.box1 { grid-column-start: 1; grid-row-start: 1; grid-row-end: span 3; @@ -583,7 +583,7 @@ original_slug: >- <p>Во втором примере поступим наоборот: зададим конечную строчную линию, а в значении свойства, отвечающего за начальную линию, напишем <code>span 3</code>. Это значит, что элемент должен занять три трека до заданной конечной линии. Грид-область начинается с линии 4 и занимает три трека до линии 1.</p> -<pre class="notranslate">.box1 { +<pre>.box1 { grid-column-start: 1; grid-row-start: span 3; grid-row-end: 4; 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 fe9d21dcb8..1e8690d0ad 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 notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {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 notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> @@ -49,7 +49,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: flex; flex-wrap: wrap; } @@ -71,7 +71,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <div id="Two_Dimensional_With_Grid"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {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 notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> @@ -98,7 +98,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); } @@ -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 notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {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 notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.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 notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {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 notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.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 notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {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 notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.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 notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {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 notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.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 notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {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 notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3"> @@ -346,7 +346,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.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 notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {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 notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three @@ -415,7 +415,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.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 notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {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 notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box box1"> <div class="nested">a</div> <div class="nested">b</div> @@ -490,7 +490,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.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 notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {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 notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box box1"> <div class="nested">a</div> <div class="nested">b</div> @@ -546,7 +546,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); |