0 added
0 removed
Original
2026-01-01
Modified
2026-03-10
1
<p>Теги: html, css, вёрстка, grid layout, grid container</p>
1
<p>Теги: html, css, вёрстка, grid layout, grid container</p>
2
<p><strong>Grid Layout</strong>-- специальный модуль CSS3, позволяющий позиционировать элементы в виде таблицы либо сетки. По сути,<strong>Grid Layout</strong>-- это гибкий подход к компоновке элементов, однако если тот же flexbox размещает вложенные элементы по горизонтали в виде столбиков либо по вертикали в виде строк (то есть в одном направлении), то Grid позиционирует элементы одновременно в 2-х направлениях -- в качестве столбцов и строк, образуя таким образом таблицу.</p>
2
<p><strong>Grid Layout</strong>-- специальный модуль CSS3, позволяющий позиционировать элементы в виде таблицы либо сетки. По сути,<strong>Grid Layout</strong>-- это гибкий подход к компоновке элементов, однако если тот же flexbox размещает вложенные элементы по горизонтали в виде столбиков либо по вертикали в виде строк (то есть в одном направлении), то Grid позиционирует элементы одновременно в 2-х направлениях -- в качестве столбцов и строк, образуя таким образом таблицу.</p>
3
<h2>Создаем grid-контейнер</h2>
3
<h2>Создаем grid-контейнер</h2>
4
<p>Grid Container -- основа для определения компоновки Grid Layout -- внутри него размещаются элементы. Чтобы создать grid-контейнер, надо присвоить его стилевому свойству display одно из 2-х значений: grid либо inline-grid.</p>
4
<p>Grid Container -- основа для определения компоновки Grid Layout -- внутри него размещаются элементы. Чтобы создать grid-контейнер, надо присвоить его стилевому свойству display одно из 2-х значений: grid либо inline-grid.</p>
5
<p>Давайте создадим простую web-страницу с применением Grid Layout:</p>
5
<p>Давайте создадим простую web-страницу с применением Grid Layout:</p>
6
<p>Обратите внимание, что для контейнера<em>grid-container</em>установлено свойство<em>display:grid</em>. В самом контейнере располагаются 5 grid-элементов.</p>
6
<p>Обратите внимание, что для контейнера<em>grid-container</em>установлено свойство<em>display:grid</em>. В самом контейнере располагаются 5 grid-элементов.</p>
7
<p>Также важно понимать, что если значение grid определяет контейнер в качестве блочного элемента, то значение inline-grid определяет элемент в качестве строчного (<strong>inline</strong>):</p>
7
<p>Также важно понимать, что если значение grid определяет контейнер в качестве блочного элемента, то значение inline-grid определяет элемент в качестве строчного (<strong>inline</strong>):</p>
8
<p>В этом случае весь грид будет занимать лишь то пространство, которое нужно для размещения его элементов.</p>
8
<p>В этом случае весь грид будет занимать лишь то пространство, которое нужно для размещения его элементов.</p>
9
<p><em>По материалам https://metanit.com/web/html5/.</em></p>
9
<p><em>По материалам https://metanit.com/web/html5/.</em></p>
10
10