Терминология — CSS: Вёрстка на Grid
В этом уроке отдельно хочется рассмотреть терминологию, связанную с Grid. Будучи основанной на сетках, она имеет множество различных понятий, знание которых будет необходимым в процессе изучения модуля.
Возможно вы уже сталкивались с понятием сетки. Зачастую это представляется неким магическим элементом, с помощью которого наша страница сразу становится удобной и красивой. Реальность, как и всегда, немного сложнее.
Понятие сетки пришло к нам с далёких времён, когда верстальщики занимались расположением контента в книге или газете. Возьмём для примера страницу Блога на сайте Хекслет. Она типична для газетной вёрстки и состоит из самостоятельных прямоугольных секций.
Эту страницу возможно разбить на некоторое количество рядов и колонок строго заданного размера. С помощью такой системы организации появляются ячейки, как в таблицах. Именно в них располагается весь контент: текст, картинки, блоки. Такой принцип называется модульными сетками. Сетки существуют во многих областях. Их применяют не только создатели газет и сайтов, но и архитекторы, дизайнеры разных направлений.
Сетки бывают совершенно разными: от простых квадратных сеток до очень сложных многослойных сеток, в структуре которых несколько сеток накладываются друг на друга. В области вёрстки часто применяются достаточно простые сетки на 12 или 24 колонки. Они достаточно универсальны для того, чтобы сверстать почти любой макет. Например, в одной из самых известных CSS библиотек Bootstrap используется система из 12 колонок. Вся организация контента построена именно на ней. В том числе сайт Hexlet, на котором вы сейчас находитесь.
Страница блога также построена по простой схеме 12 колоночной сетки. Она разделена на 12 одинаковых колонок с равными отступами между ними. Обратите внимание на то, как выстроен контент. Вы увидите, что каждый элемент подчиняется этой сетке, хоть вначале это могло казаться не так.
Обратите внимание на то, как левая и правая часть контента в блоге отделена с помощью отступа. Такой же размер отступа используется на протяжении всей сетки. Сами прямоугольные области с контентом могут занимать несколько колонок сразу. Это и позволяет создавать блоки различной ширины, при этом оставаясь в рамках сетки.
Зачастую таких сеток достаточно, чтобы выстроить контент на странице. Но иногда разработчики создают сетки внутри других элементов. Например блок со статьёй можно было бы тоже разметить и расположить контент по уже её внутренней сетке. Хоть и рабочий вариант, но старайтесь не перегружать свою страницу различными сетками. В первую очередь сетки позволяют нам создать шаблон сайта, а не работать с контентом где-то внутри шаблона.
Если вы когда-нибудь верстали таблицы с помощью HTML, то можете заметить, что принципы работы таблиц и сеток похожи. Так как по сути таблицы — это и есть сетка.
Обобщая всё сказанное в этом уроке, можно заключить, что сетки — это некая структура, направляющие, с помощью которых мы располагаем контент на странице как по горизонтали, так и по вертикали.
Чем же так полезны сетки? Ведь до этого мы прекрасно обходились и без них, да и некоторые из вас уже могли верстать целые сайты без их использования. У сеток есть ряд преимуществ:
- Сетки предсказуемы. Мы заранее знаем с чем работаем, и как расположится наш контент. Сколько места он займёт относительно других блоков. В этом случае ширина измеряется количеством модулей сетки, а не значениями в пикселях.
- Сетки отлично подходят для адаптивности. Это главное преимущество сеток. С ними очень просто создавать адаптивный дизайн для страниц.
Обратите внимание, что сейчас речь шла о сетках в общем, а не о Grid. Сетку возможно создать, совершенно не используя CSS Grid Layout. Например в Bootstrap когда-то использовался float. На текущий момент используется Flex. И там, и там получаются рабочие сетки. Но с приходом новой технологии процесс создания сеток значительно упростился, что положительно сказывается на скорости разработки.
В CSS Grid Layout есть несколько основных понятий, которые необходимо знать перед тем, как использовать модуль в реальной работе. Это поможет лучше понимать, как свойства влияют на нашу сетку. Пока все примеры будут показаны на абстрактном блоке. Разделим этот блок на 4 колонки и посмотрим, из чего он состоит:
Все колонки расположены внутри определённой области, которая ограничивает сетку со всех четырёх сторон. Весь этот прямоугольник, как вы могли догадаться, называется Grid-контейнером. Как и у Flex, сетка также создается внутри определённого блока.
Как вы видите, всю нашу структуру мы можем мысленно поделить на части, используя вертикальные и горизонтальные линии. Такие линии хоть и не видны на макете, но на самом деле Grid умеет с ними работать. Их можно нумеровать и даже давать имена. В дальнейших уроках мы разберём это подробнее. Эти линии называются Grid-линии или Линия Сетки.
После того, как мы разметили линии сетки, появились пересечения. Как у таблиц. В модуле они называются точно так же. Если какая-то область ограничена соседними вертикальными линиями, то это колонка, если горизонтальными, то это ряд. Также такие области ещё называют Полосой сетки или Трек сетки (Grid Tracks). Пересечение колонки и ряда станет ячейкой сетки.
Если взять несколько ячеек, то мы получим Grid область. При этом неважно, каким образом мы возьмём эти ячейки. Они могут быть из одного ряда или колонки, главное, что они должны быть ограничены едиными линиями сетки со всех четырёх сторон.
В процессе изучения курса мы вернёмся ко всем этим понятиям и тем, как с ними работать. Не пугайтесь, что сейчас этих понятий может быть достаточно много. В процессе изучения вы быстро научитесь определять область, с которой сейчас работаете.
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
Grid track что это
- Введение
- Сравнение с Flexbox
- Поддержка браузерами
- Свойства для контейнера
- display
- grid-template-columns
grid-template-rows - grid-template-areas
- grid-template
- grid-column-gap
grid-row-gap
grid-gap - grid-auto-columns
grid-auto-rows - grid-auto-flow
- grid
- justify-items
align-items
place-items - justify-content
align-content
place-content
- Свойства для элементов
- grid-area
- grid-column-start
grid-column-end
grid-row-start
grid-row-end - grid-column
grid-row - justify-self
align-self
place-self
1. Введение
CSS Grid Layout — самая мощная система компоновки из доступных на данный момент в CSS. Это двумерная система, которая может обрабатывать как столбцы так и строки, в отличии от Flexbox, который в значительной степени является одномерной системой. При работе с CSS Grid, вы применяете CSS правила к родительским элементам (которые становятся Grid контейнерами) и к дочерним элементам (которые становятся Grid элементами).
Контейнер сетки Элемент к которому применяется display: grid . Это прямой родитель для всех элементов сетки. В этом примере grid-container является контейнером. 
Элемент сетки Дочерние элементы (прямы потомки) контейнера. На примере выше item это элемент сетки. Линия сетки (Grid Line) Разделительные линии, составляющие структуру для сетки. Они могут быть вертикальными (линии колонок) или горизонтальными (линии строк) и располагаться по обе стороны от строки или столбца. На изображении синяя линия является примером вертикальной линии (линией колонки). 
Трек сетки (Grid Track) Пространство между двумя соседними линиями. Трек можно представить как строку (колонка) или столбец (ряд). Вот трек между второй и третей линией строк. 
Ячейка сетки (Grid Cell) Пространство между линиями двух соседних строк и двух соседних столбцов. Это отдельная единица измерения сетки. Вот пример ячейки между линиями строк 1 и 2, линиями колонок 2 и 3. 
Область сетки (Grid Area) Общее пространство окружённое четырьмя линиями. Область может состоять из любого количества ячеек. Вот пример области между строками 1 и 3 и колонками 1 и 3. 
Как устроен grid контейнер 
2. Сравнение с Flexbox
В отличие от Flex, которая ориентирована на одну ось, Grid оптимизирована для двумерных компоновок: когда требуется расположить (выровнять) содержимое в обоих измерениях (по вертикали и горизонтали).
Кроме того, благодаря возможности явного позиционирования элементов в сетке, Grid позволяет выполнять кардинальные преобразования в структуре, не требуя никаких изменений HTML разметки. Комбинируя медиа-запросы со свойствами CSS, управляющими компоновкой контейнера grid и его дочерних элементов, можно адаптировать верстку под любые форм-факторы устройств.
Grid и Flexbox, имеют свои особенности и нельзя сказать, что одно заменяет другое. Скорее Флекс является дополнением к Грид, или наоборот.
Flexbox фокусируется на распределении пространства внутри одной оси, использует более простой подход к компоновке, может использовать систему упаковки строк на основе размера содержимого для управления своей вторичной осью и полагается на иерархию разметки. Тогда как Grid больше подходит для создания каркасов, потому что имеет более мощный и комплексный подход и в целом не зависит от иерархии разметки. В отдельных случаях Grid позволяет создать адаптивный макет, который невозможно создать с помощью Flex или как-то еще.
Flexbox — ориентируется по одной оси 
CSS Grid — ориентируется по двум осям 
3. Поддержка браузерами
В данный момент почти все современные браузеры поддерживают Grid CSS без необходимости указывать дополнительные префиксы и покрывают 95.45% всех устройств.
Посмотреть на сайте Can I use
4. Свойства для контейнера
display Опеределяет элемент как контейнер и устанавливает новый контекст форматирования сетки для его содержимого.
- grid — формирует сетку как блок
- inline-grid — формирует сетку как строчный элемент
- subgrid — если элемент сам является контейнером
- px, em, rem, % — может быть фиксированным размером, процентами или частью свободного пространства в сетка (определяется с помощью единицы fr — фракция
- min-content — наименьший размер контента. Для текста это ширина самого длинного слова или неразрывного фрагмента.
- max-content — наибольший размер контента. Для текста это длина самой большой строки безе переносов.
- fit-content(max) — функция которой передается макс. размер. Если контент меньше этого размера, ведет себя как auto , если больше, то ограничивает размер ряда/колонки до указанного в параметре max.
- minmax(min,max) — функция, позволяет разом указать минимальный и максимальный размер.
Значения:- px,em,rem. — единицы длины
- % — проценты
- fr — фракция (гибкий размер). Может использоваться только для макс. значения.
- min-content
- max-content
- auto — зависит от того, используется оно как максимальное или минимальное значение функции minmax(): если в качестве максимума, то тоже самое что max-content, если в качестве минимума, то значение будет минимальным возможным размером для ячейки. Такой размер отличается от min-content и задается свойствами min-width или min-height.
- auto-fill — повторяет ряд/колонку пока есть место в контейнере. Хотя бы одно повторение будет всегда.
- auto-fit — то же самое, но после размещения элементов оставшиеся пустыми ряд/колонка сжимаются и исчезают, в результате контейнер всегда будет выглядеть заполненным.
- grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
- grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
- grid-template-columns: repeat(2, 100px 1fr);
- grid-area-name — имя области заданное с помощью grid-area
- . — точка обозначающая пустую ячейку
- none — области не определены
See the Pen Grid Ex1 by ismail (@itdoctor) on CodePen.
- none — устанавливает все три свойства в их начальное значение
- subgrid — устанавливает grid-template-columns и grid-template-rows в subgrid и grid-template-area в его начальное значение
- grid-template-rows / grid-template-columns — устанавливает эти два свойства в определенное значение, а grid-template-area в none
- grid-template:
«header header header» 100px
«main main sidebar» 500px / 1fr 1fr 1fr; /*
100px — высота первой строки
500px — высота второй строки
1fr 1fr 1fr — ширина столбцов
*/
- line-size — значение размера, например в px
- grid-column-gap: 10px;
- grid-row-gap: 20px;
- grid-gap: 15px;
- grid-gap: grid-row-gap grid-column-gap;
- track-size — значение размера в %, px, em, rem или fr
- grid-auto-columns: 320px;
- grid-auto-rows: 1fr;
- row — говорит алгоритму авто-размещения заполнять каждую строку поочерёдно, добавляя новые строки при необходимости
- column — говорит алгоритму авто-размещения заполнять каждую колонку поочерёдно, добавляя новые колнки при необходимости
- dense — говорит алгоритму авто-размещения заполнять дыры в сетке, если более мелкие элементы появляются позже
- none — настраивает все совйства на их начальные значения
- grid-template-rows / grid-template-columns
- grid-auto-flow grid-auto-rows / grid-auto-columns
- grid-template-areas
- grid-template
- grid: ‘header header header header’ ‘main main main right right’ ‘footer footer footer footer’;
- grid: 100px 300px / 3fr 1fr;
- grid: auto-flow dense 100px / 1fr 2fr;
- grid: 100px 300px / auto-flow 200px;
- grid: [row1-start] «header header header» 1fr [row1-end] [row2-start] «footer footer footer» 25px [row2-end] / auto 50px auto;
- grid: repeat(auto-fill, 5em) / auto-flow 1fr;
- grid: auto-flow 1fr / repeat(auto-fill, 5em);
- grid: auto 1fr auto / repeat(5, 1fr);
- grid: repeat(3, auto) / repeat(4, auto);
Значения:
- start — размещает все элементы в начале ячеек (слева / сверху)
- end — размещает все элементы в конце ячеек (справа / снизу)
- center — размещает все элементы по центру ячеек
- stretch — растягивает все элементы на всю ширину / высоту ячеек
Примеры:
- align-items: center;
- justify-items: end;
- place-items: start;
- place-items: align-items justify-items;
justify-content (1)
align-content (2)
place-content Выравнивает сетку внутри контейнера.
(1) Выравнивает элементы по горизонтали.
(2) Выравнивает элементы по вертикали.
Значения:
- start — размещает все элементы в начале ячеек (слева / сверху)
- end — размещает все элементы в конце ячеек (справа / снизу)
- center — размещает все элементы по центру ячеек
- stretch — растягивает все элементы на всю ширину / высоту контейнера
- space-around — одинаковое пространство между элементами, и полуразмерные отступы по краям
- space-between — одинаковое пространство между элементами, без отступов по краям
- space-evenly — одинаковое пространство между элементами и полноразмерные отступы по краям
Примеры:
- align-content: center;
- justify-content: end;
- place-content: start;
- place-content: align-content justify-content;
5. Свойства для дочерних элементов
- name — название, которое вы выберите
- grid-row-start / grid-column-start / grid-row-end / grid-column-end — может быть нумерацией или названиями линий
- grid-area: header;
- grid-area: sidebar;
- grid-area: 1 / 2 / span 2 / -1;
- grid-line — может быть числом ссылающимся на пронумерованную линию, или названием ссылающимся на именованную линию
- span N — элемент, который будет охватывать предоставленное в N количество треков
- span grid-line — элемент будет охватывать пространство пока не достигнет линии с название указанным вместо grid-line
- auto — указывает автоматическое размещение, автоматический охват или охват по умолчанию
- grid-column-start: 2;
- grid-column-end: span 3;
- grid-row-start: myLine1;
- grid-row-end: -1;
- grid-column: start-line / end-line;
- grid-row: start-line / end-line;
- grid-column: start-line / span value;
- grid-row: start-line / span value;
- grid-column: 2 / span 3;
- grid-row: myLine1 / -1;
- start — выравнивает содержимое по верхней / левой части области
- end — выравнивает содержимое по нижней / правой части области
- center — выравнивает содержимое по центру области
- stretch (default) — заполняет всю высоту / ширину области
- align-self: center;
- justify-self: start;
- place-self: end;
- place-self: align-self justify-self;
RinatMullayanov / grid-learn.md
Grid container — это набор пересекающихся горизонтальных и вертикальных grid линий, которые делят пространство grid контейнера на grid области, в которые могут быть помещены grid элементы. Внутри grid контейнера есть два набора grid линий: один определяет ось столбцов, другой определяет ось строк.
Grid lines — это горизонтальные и вертикальные разделители grid контейнера. Эти линии находятся по обе стороны от столбца или строки. Автор может задать для данного элемента имя или числовой индекс, которые может использовать дальше в стилях. Нумерация начинается с единицы. Важный нюанс, данный элемент восприимчив к режиму написания, который используется на вашем ресурсе. Например, вы используете Арабский язык или любой другой язык у которого режим написания справа налево, то нумерация линий будет начинаться с правой стороны.
Grid track — это пространство между двумя смежными grid линиями, вертикальными или горизонтальными.
Grid cell — это наименьшая неделимая единица grid контейнера на которую можно ссылаться при позиционировании grid элементов. Образуется на пересечении grid строки и grid колонки.
Grid area — это пространство внутри grid контейнера, в которое может быть помещен один или больше grid элементов. Этот элемент может состоять из одной или более grid ячеек.
2.28. CSS Grid
W3C описывает модуль CSS Grid Layout как систему двумерного макета, оптимизированного для дизайна пользовательского интерфейса. Главная идея, лежащая в основе макета сетки, заключается в разделении веб-страницы на столбцы и строки. В образовавшиеся области сетки можно помещать элементы сетки, а управлять их размерами и расположением можно с помощью специальных свойств модуля.
Кроме того, благодаря своей способности явно размещать элементы в сетке, Grid Layout позволяет кардинально преобразовывать структуру визуального макета (отображаемого на экране), не требуя соответствующих изменений разметки.
Хотя многие макеты могут быть отображены с помощью Grid или Flexbox, у каждого есть свои особенности. Grid обеспечивает двухмерное выравнивание, использует нисходящий подход к макету, допускает явное перекрытие элементов и обладает более мощными связующими возможностями. Flexbox фокусируется на распределении пространства по оси, использует более простой восходящий подход к макету, может использовать систему переноса строк на основе размера контента для управления своей вторичной осью и опирается на базовую иерархию разметки для построения более сложных макетов.
Во всех примерах будет рассмотрен стандартный синтаксис. Если вы захотите адаптировать синтаксис для IE10-11 и Microsoft Edge, воспользуйтесь руководством Microsoft Developer Network Grid layout.
Список текущих багов и неполных реализаций приведен в статье Rachel Andrew GridBugs.
Руководство по CSS Grid Layout
- Содержание:
- 1. Концепция сетки и основные понятия
- 2. Создание контейнера-сетки: значения grid и inline-grid свойства display
- 3. Определение сетки
- 3.1. Как задать количество строк и столбцов: свойства grid-template-rows и grid-template-columns
- 3.2. Именованные области: свойство grid-template-areas
- 3.3. Сокращенная запись явного объявления сетки: свойство grid-template
- 3.4. Неявная сетка
- 3.4.1. Автоматическое создание дорожек сетки: свойства grid-auto-rows и grid-auto-columns
- 3.4.2. Автоматическое размещение: свойство grid-auto-flow
- 3.5. Сокращенная запись сетки: свойство grid
- 4. Элементы сетки
- 5. Размещение и переупорядочивание элементов сетки
- 5.1. Размещение с помощью линий сетки: свойства grid-row-start, grid-column-start, grid-row-end и grid-column-end
- 5.2. Сокращенная запись свойств размещения элементов сетки: свойства grid-row, grid-column и grid-area
- 6. Выравнивание элементов сетки и промежутки между элементами
- 6.4. Промежутки между элементами сетки: свойства row-gap, column-gap и gap
Поддержка браузерами
IE: 10.0 -ms-
Edge: 16.0, 12.0 -ms-
Firefox: 52.0
Chrome: 57.0
Safari: 10.1
Opera: 44.0
iOS Safari: 10.3
Opera Mini: —
Android Browser: 67.0
Chrome for Android: 70.01. Концепция сетки и основные понятия
Сетка (grid) представляет собой набор пересекающихся горизонтальных и вертикальных линий, делящих пространство grid-контейнера на области сетки, в которые могут быть помещены элементы сетки.
Линии сетки (grid lines) — это невидимые горизонтальные и вертикальные разделительные линии, они существуют по обе стороны от строки и столбца. На них можно ссылаться по числовому индексу (используя свойства grid-column-start , grid-column-end , grid-row-start и grid-row-end ) или имени, заданному в CSS-коде. Числовые индексы сетки зависят от стиля языка, поэтому первым столбцом может быть как самый левый, так и самый правый столбец.
Выделяют две группы линий сетки: одна группа определяет столбцы, которые проходят вдоль оси блока (ось столбцов), и перпендикулярная группа, определяющая строки, простирающиеся вдоль линейной оси (ось строк), в соответствии с CSS3 режимом записи.
Дорожка сетки (grid track) — пространство между двумя соседними линиями сетки, используется для определения либо столбца, либо строки сетки. Дорожка идет от одного края контейнера к другому, размер зависит от расположения линий сетки, которые ее определяют. Дорожки сетки аналогичны столбцам и строкам таблицы. По умолчанию смежные дорожки плотно прилегают друг к другу, задать расстояние между ними можно с помощью свойств row-gap , column-gap и gap .
Ячейка сетки (grid cell) — пространство, ограниченное четырьмя линиями сетки, аналогично ячейке таблицы. Ячейка сетки — это область, в которой можно разместить контент. Это наименьшая единица сетки, на которую можно ссылаться при позиционировании элементов сетки. К ячейкам сетки нельзя обращаться напрямую с помощью CSS-свойств.
Область сетки (grid area) — прямоугольная область, ограниченная четырьмя линиями сетки и состоящая из одной или нескольких соседних ячеек. Область может быть такой же маленькой, как одна ячейка, или такой же большой, как все ячейки сетки. Область сетки может быть задана явно с помощью свойства grid-template-areas , по умолчанию на нее ссылаются ограничивающие линии сетки.
Элементы сетки (grid items) — отдельные элементы, которые назначаются области сетки (или ячейке сетки). Каждый контейнер-сетка включает ноль и более элементов сетки; каждый дочерний элемент контейнера-сетки автоматически становится элементом сетки.
Дорожки, ячейки и области сетки построены из линий сетки. Тем не менее не требуется, чтобы все области сетки были заполнены элементами, вполне возможно, что некоторые или даже большинство ячеек сетки будут пустыми от любого содержимого. Также возможно, что элементы сетки будут перекрывать друг друга, либо определять перекрывающиеся области сетки.
2. Создание контейнера-сетки: значения grid и inline-grid свойства display
Для создания макета на основе сетки необходимо определить контейнер-сетку.
Контейнер-сетка (grid container) — это блок, который устанавливает контекст форматирования по типу сетки, то есть создает область с сеткой, а дочерние элементы располагаются в соответствии с правилами компоновки сетки, а не блочной компоновки. Когда вы определяете контейнер сетки с помощью display: grid или display: inline-grid , вы создаете новый контекст форматирования для содержимого этого контейнера, который влияет только на дочерние элементы сетки.
.grid-container < display: grid; grid-template-areas: "post-1 post-1 post-2" "post-1 post-1 post-3" "post-6 post-5 post-4"; grid-template-rows: repeat(3, 200px); grid-template-columns: repeat(3, 1fr); >.post-1 < grid-area: post-1; >.post-2 < grid-area: post-2; >.post-3 < grid-area: post-3; >.post-4 < grid-area: post-4; >.post-5 < grid-area: post-5; >.post-6
3.3. Сокращенная запись явного объявления сетки: свойство grid-template
Свойство grid-template является сокращением для установки свойств grid-template-rows , grid-template-columns и grid-template-areas в одном объявлении.
Свойство не наследуется.
grid-template Значения: none Устанавливает для всех трех свойств начальные значения none . значение grid-template-rows / grid-template-columns Устанавливает grid-template-rows и значение grid-template-columns в указанные значения, а grid-template-areas в значение none . имена линий сетки или последовательность идентификаторов, заключенная в кавычки и размер дорожки или именованные линии сетки или + /явный список дорожек Устанавливает grid-template-areas для перечисленных последовательностей идентификаторов. Устанавливает для grid-template-rows указанные значения размеров дорожек, следующие за каждой последовательностью идентификаторов (выставляя auto для любых отсутствующих размеров), и объединяет в именованных линиях сетки, определенных до / после каждого размера. Устанавливает grid-template-columns в список дорожек, указанный после косой черты (или ни одного, если не указан). .grid-container < display: grid; grid-template: repeat(3, 200px)/repeat(3, 1fr); >.post-1 < grid-row-start: 1; grid-row-end: 3; grid-column-start: 1; grid-column-end: 3; >.post-2 < grid-row-start: 1; grid-row-end: 2; grid-column-start: 3; grid-column-end: 4; >..grid-container < display: grid; grid-template: [start] "post-1 post-1 post-2" 200px [row2] [row2] "post-1 post-1 post-3" 200px [row3] [row3] "post-6 post-5 post-4" 200px [row-end] / 1fr 1fr 1fr; >.post-1 < grid-area: post-1; >.post-2 < grid-area: post-2; >.Функция repeat() не разрешена для определения списка дорожек в этом свойстве, если используются именованные области сетки (сетка просто не будет отрисована).
3.4. Неявная сетка
3.4.1. Автоматическое создание дорожек сетки: свойства grid-auto-rows и grid-auto-columns
Если элемент сетки расположен в строке или столбце, размер которых не определен явно grid-template-rows или grid-template-columns , создаются неявные дорожки сетки для его хранения. Это может произойти в случае, если строка или столбец оказались за пределами установленных размеров сетки.
По умолчанию эти автоматически добавляемые дорожки имеют минимальный необходимый размер. Свойства grid-auto-rows и grid-auto-columns позволяют контролировать размер неявных дорожек сетки. Если дано несколько размеров дорожек, шаблон повторяется по мере необходимости, чтобы найти размер неявных дорожек. Первая неявная дорожка сетки после явной сетки получает первый заданный размер и так далее.
Свойства не наследуются.
grid-auto-columns, grid-auto-rows Значения: auto Значение по умолчанию. размер дорожки + В качестве размера дорожки может использоваться любое значение, допустимое для задания размеров дорожек сетки. 
.grid-container < max-width: 710px; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,100px); grid-auto-rows: 50px; >.post-1 < grid-column: 1/3; grid-row: 1/3; >.post-2 < grid-column: 3; grid-row: 1; >.post-3 < grid-column: 3; grid-row: 2; >.post-4 < grid-column: 3; grid-row: 3; >.post-5 < grid-column: 2; grid-row: 3; >.post-6
3.4.2. Автоматическое размещение: свойство grid-auto-flow
Элементы сетки, которые не размещены явно, автоматически помещаются в незанятое пространство в контейнере-сетке с помощью алгоритма автоматического размещения. Свойство grid-auto-flow управляет автоматическим размещением элементов сетки без явного положения. После заполнения явной сетки (или если явной сетки нет) автоматическое размещение также приведет к генерации неявных дорожек сетки.
Свойство не наследуется.
grid-auto-flow Значения: row Алгоритм автоматического размещения размещает элементы, заполняя каждую строку по очереди слева-направо (для LTR-языков), добавляя новые строки по мере необходимости. Значение по умолчанию. column Алгоритм размещает элементы, заполняя каждый столбец по очереди сверху-вниз, добавляя новые столбцы по мере необходимости. dense Алгоритм «плотной» укладки элементов. При необходимости может менять порядок следования элементов, заполняя пустые места более крупными элементами. Свойство будет полезным при создании компактных галерей, если для изображений не задан порядок, в котором они должны быть расположены. Для каждого элемента сетки браузер сканирует всю сетку в заданном направлении потока (строка или столбец), начиная от начальной точки потока (верхний левый угол, на языках LTR — слева направо), пока не найдет место, куда поместится этот элемент сетки.
.grid-container < max-width: 710px; margin: 10px auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; grid-auto-rows: 200px; grid-auto-flow: dense; >.item5 < grid-column: span 2; grid-row: span 2; >.item6
3.5. Сокращенная запись сетки: свойство grid
Свойство grid задает все явные grid-template-rows , grid-template-columns и grid-template-areas и все неявные свойства сетки grid-auto-flow , grid-auto-rows и grid-auto-columns в одном объявлении. Оно не сбрасывает свойства row-gap / column-gap . Его синтаксис соответствует grid-template , а также дополнительной синтаксической форме для определения автоматического размещения элементов сетки:
Путем явного задания дорожек на одной оси (устанавливая grid-template-rows или grid-template-columns и задавая другим значение none ), и задавая, как автоматически повторять дорожки на другой оси (устанавливая grid-auto-rows или grid-auto-columns и задавая другим auto ).
Для grid-auto-flow также устанавливается одно из трех допустимых значений. Все остальные подсвойства grid сбрасываются к своим начальным значениям.
/* значения для grid-template */ grid: none; grid: "a" 100px "b" 1fr; grid: [linename1] "a" 100px [linename2]; grid: "a" 200px "b" min-content; grid: "a" minmax(100px, max-content) "b" 20%; grid: 100px / 200px; grid: minmax(400px, min-content) / repeat(auto-fill, 50px); /* значения для grid-template-rows / [auto-flow && dense? ] grid-auto-columns? */ grid: 200px / auto-flow; grid: 30% / auto-flow dense; grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px; grid: [line1] minmax(20em, max-content) / auto-flow dense 40%; /* значения для [ auto-flow && dense? ] grid-auto-rows? / grid-template-columns */ grid: auto-flow / 200px; grid: auto-flow dense / 30%; grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px); grid: auto-flow dense 40% / [line1] minmax(20em, max-content);4. Элементы сетки
Контейнер-сетка устанавливает новый контекст форматирования для элементов сетки, который обуславливает следующие особенности:
- Для элементов сетки блокируется их значение свойства display . Значение display: inline-block вычисляется в display: block , анонимные блоки текста также занимают всю ширину контейнера и образуют разрыв строки.
- Размер элемента сетки в пределах содержащего блока определяется его областью сетки.
- Расчеты элементов сетки для width: auto и height: auto зависят от их значений align-self :
align-self: normal; — незамещаемые элементы заполняют область сетки, замещаемые элементы используют собственные размеры;
align-self: stretch; — обе категории элементов заполняют область сетки;
align-self: start/center и т.д. — незамещаемые элементы устанавливают размеры в соответствии со своим содержимым, замещаемые элементы используют собственные размеры. - Поскольку соседние элементы сетки находятся в независимых областях сетки, то поля соседних элементов сетки margin не схлопываются.
- Браузеры по-разному обрабатывают процентные значения свойств margin и padding , поэтому не рекомендуется использовать их при задании значений этих свойств.
- Поля margin: auto; расширяются, поглощая свободное пространство в соответствующем измерении, поэтому могут использоваться для выравнивания элемента.
5. Размещение и переупорядочивание элементов сетки
Свойства размещения позволяют свободно упорядочивать и переупорядочивать содержимое сетки таким образом, что визуальное представление может значительно отличаться от порядка элементов в html-документе.
5.1. Размещение с помощью линий сетки: свойства grid-row-start, grid-column-start, grid-row-end и grid-column-end
Каждый элемент сетки связан с областью сетки, которая определяет содержащий блок для элемента сетки. Положение элементов сетки определяется расположением линий сетки и диапазоном сетки — количеством занимаемых дорожек сетки. По умолчанию элемент сетки занимает одну дорожку на каждой оси. Поэтому можно опустить значение grid-column-end или grid-row-end .
Свойства размещения на сетке — grid-row-start , grid-row-end , grid-column-start и grid-column-end и их краткая запись grid-row , grid-column и grid-area позволяют определить размещение элемента сетки, предоставив любую (или ноль) из следующих шести частей информации:
Строка Столбец Начало Начальная линия строки Начальная линия столбца Конец Конечная линия строки Конечная линия столбца Диапазон Диапазон строк Диапазон столбцов grid-row-start, grid-column-start, grid-row-end, grid-column-end Значения: auto Свойство не влияет на размещение элемента сетки, указывая на автоматическое размещение или диапазон по умолчанию, равный единице. имя линии Начальная и конечная линия строки/столбца задаются в именованных линий сетки. целое число и имя линии? Начальная и конечная линия строки/столбца задаются с помощью целого числа (отрицательное порядковый номер линии сетки будет отсчитываться с противоположного края явной сетки) и (необязательно) имени линии. span и целое число или имя линии Ключевое слово span и целое положительное число/имя линии задают диапазон ячеек для размещения элемента сетки. 
.grid-container < display: grid; grid-template-rows: 200px 200px 200px; grid-template-columns: 1fr 1fr 1fr; >.post-1 < grid-row-start: 1; grid-row-end: 3; grid-column-start: 1; grid-column-end: 3; >.post-2 < grid-row-start: 1; grid-column-start: 3; >.post-3 < grid-row-start: 2; grid-column-start: 3; >.post-4 < grid-row-start: 3; grid-column-start: 3; >.post-5 < grid-row-start: 3; grid-column-start: 2; >.post-6
5.1.1. Именованные линии сетки
Хотя на линии сетки можно ссылаться по их числовому индексу, именованные линии облегчают понимание и использование свойств размещения сетки. Линии могут быть названы явно в свойствах grid-template-rows и grid-template-columns или неявно путем создания именованных областей сетки в свойстве grid-template-areas .
Имя линии может быть любым, при указании в значении свойства оно заключается в квадратные скобки. В качестве имени линии нельзя использовать слово span .
.grid-container < display: grid; grid-template-rows: [start] 200px [row2] 200px [row3] 200px [row-end]; grid-template-columns: [start] 1fr [col2] 1fr [col3] 1fr [col-end]; >.post-1 < grid-row-start: span 2; grid-column-start: span 2; >.post-2 < grid-row-start: start; grid-column-start: col3; >.post-3 < grid-row-start: row2; grid-column-start: col3; >.post-4 < grid-row-start: row3; grid-column-start: col3; >.post-5 < grid-row-start: row3; grid-column-start: col2; >.post-6
Имена линий добавляются к неявным именам линий сетки, созданным свойством grid-template-areas , принимая вид name-start и name-end . Имена линий сетки никогда не заменяют другие имена линий сетки. Вместо этого они просто накапливаются.
5.2. Сокращенная запись свойств размещения элементов сетки: свойства grid-row, grid-column и grid-area
Свойства grid-row и grid-column являются сокращенными именами для свойств grid-row-start / grid-row-end и grid-column-start / grid-column-end соответственно.
Если заданы два значения, первое (до косой черты) устанавливается для параметра grid-row-start/grid-column-start , второе — для grid-row-end/grid-column-end . Если второе значение опущено, а первое указано в формате пользовательского идентификатора, то grid-row-end/grid-column-end также устанавливается в пользовательское имя сетки. В противном случае, оно вычисляется в auto .
Для свойства grid-area если указано четыре значения, первое устанавливается для grid-row-start , второе — для grid-column-start , третье — для grid-row-end , четвертое — для grid-column-end .
Если grid-column-end/grid-row-end не указан, а grid-column-start/grid-row-start указан в форме пользовательского имени, то для grid-column-end/grid-row-end также устанавливается значение пользовательского имени линии; в противном случае он установлен на auto .
Когда grid-column-start опущен, а значение grid-row-start указан в форме пользовательского имени, оно устанавливается для всех четырех значений. В противном случае оно устанавливается на auto .
grid-area grid-row grid-column grid-row-start grid-row-end grid-column-start grid-column-end grid-row: a; grid-row: auto; grid-column: 2; grid-row: 1 / -1; grid-column: sidebar-start / footer-end;grid-area: a; grid-area: auto; grid-area: 2 / 4; grid-area: 1 / 3 / -1; grid-area: header-start / sidebar-start / footer-end / sidebar-start;5.3. Переупорядочивание элементов сетки
Свойство order также применяется к элементам сетки. Это влияет на их автоматическое размещение и порядок отрисовки. Свойство должно использоваться только для визуального, а не логического переупорядочения контента.
6. Выравнивание элементов сетки и промежутки между элементами
Для выравнивания элементов сетки можно использовать свойство margin , аналогично, как работает это свойство для блочных элементов.
По умолчанию элементы сетки растягиваются, чтобы заполнить свою область сетки. Тем не менее, если justify-self или align-self вычисляют значение, отличное от stretch или задано margin: auto , элементы сетки будут автоматически изменяться в соответствии с их содержимым.
6.1. Выравнивание с помощью margin: auto
При расчете размеров дорожек сетки margin: auto обрабатываются как 0 . Они поглощают положительное свободное пространство, предшествующее выравниванием с помощью свойств выравнивания. Переполняющиеся элементы игнорируют свои автоматические поля и переполнение, как указано в их свойствах выравнивания блоков.
6.2. Выравнивание по оси строки
Элементы сетки могут быть выровнены в направлении оси строки (по горизонтали для LTR-языков) с помощью свойства justify-self или свойства justify-items (заданного для контейнера-сетки).
6.3. Выравнивание по оси столбца
Элементы сетки могут выровнены в направлении, перпендикулярном оси строки с помощью свойства align-self или свойства align-items , заданного для контейнера-сетки.
6.4. Промежутки между элементами сетки: свойства row-gap, column-gap и gap
Свойства row-gap и column-gap (и их сокращенная запись gap ), если они указаны в контейнере сетки, определяют промежутки между строками и столбцами сетки. При определении размера дорожки каждый промежуток рассматривается как дополнительная пустая дорожка указанного размера. Дополнительный промежуток также может быть добавлен между дорожками за счет свойств justify-content и align-content .
Промежутки добавляются только между двумя дорожками сетки, то есть они не добавляются перед первой и после последней дорожки.
Свойства не наследуются.
row-gap, column-gap Значения: normal Вычисляется как 0px . Значение по умолчанию. длина или % Процентное значение вычисляется относительно размеров области сетки. Отрицательные значения не используются. row-gap: 1.5em; column-gap: 10px; gap: 1%;