Что такое grid? Чем отличается grid-template от grid-auto?
Я всегда задавался вопросом: в чем разница между свойствами grid-template-* и grid-auto-*? Особенно интересно выявить различия между grid-template-rows/columns и grid-auto-rows/columns.
Что такое Grid -явный и неявный
Явный Grid (CSS Grid Layout) определяется свойством grid-template-*:
Три объединенных свойства grid-template-rows, grid-template-columns, и grid-template-areas определяют явный Grid.
С другой стороны, неявный Grid определяется, как «все остальное» ‒
Когда элементы расположены за пределами сетки, Grid-контейнер генерирует неявные полосы путем их добавления в общий Grid.
Эти определения сложно понять, поэтому попробуем перефразировать.
Внутри Grid-контейнера есть ячейки. Любая ячейка, для которой можно определить положение и размер с помощью свойства grid-template-* , является частью сетки. Любая Grid-ячейка, для которой нельзя определить положение и размер с помощью этого свойства, является частью неявного Grid.
Чем отличаются свойства grid-template и grid-auto?
Свойства grid-template-* и grid-auto-* немного похожи. Но их применение приносит разные результаты.
Свойства grid-template-* используется для установки позиции и размера ячеек сетки. Свойства grid-auto-* определяет только размер ячеек.
Поэтому grid-template-* применяется для создания явного Grid. Свойства grid-auto-* - чтобы определить размер неявного Grid (который создается автоматически).
Как работает grid-template
grid-template – это сокращенное название трех свойств: grid-template-rows, grid-template-columns, grid-template-areas. Сосредоточимся на первых двух свойствах.
Начнем со свойства grid-template-rows. Если нужно создать сетку с одной строкой высотой в 100px, используем следующий код:
.grid {
display: grid;
grid-template-rows: 100px;
}Чтобы добавить еще одну строку, добавляем еще одно значение через пробел.
.grid {
display: grid;
grid-template-rows: 100px 100px;
}Таким же образом работает и свойство grid-template-columns.
Существует несколько способов определить высоту и ширину колонок с помощью свойства grid-template-* . В примере, приведенном выше, каждое значение длины, разделенное пробелом, представляет собой одну полосу. Получается, что свойства grid-template-* используются для определения размеров, расположения и разметки Grid-ячеек.
Как работает grid-auto
grid-auto – это сокращенное название трех свойств: grid-auto-rows, grid-auto-columns и grid-auto-flow. Рассмотрим первые два.
Свойства grid-auto-rows и grid-auto-columns принимают значение длины любых неявных Grid-ячеек. Например, можно создать ячейку высотой 100px:
.grid {
display: grid;
grid-auto-rows: 100px;
}В отличие от grid-template-* свойства grid-auto-* принимают только одно значение длины.
Работаем с явным и неявным Grid
Чтобы лучше понять разницу между свойствами grid-template-* и grid-auto-* , а также отличия между явным и неявным Grid, рассмотрим приведенный ниже HTML-код.
<div class="grid">
<div class="cell">Cell 1</div>
<div class="cell">Cell 2</div>
<div class="cell">Cell 3</div>
<div class="cell">Cell 4</div>
<div class="cell">Cell 5</div>
<div class="cell">Cell 6</div>
<div class="cell">Cell 7</div>
<div class="cell">Cell 8</div>
</div>И CSS:
.grid {
display: grid;
grid-gap: 10px; /* добавим отступ между полосами для наглядности */
}Сейчас наш Grid выглядит так.
Кажется, что ничего не произошло. Но на самом деле мы только что создали неявный Grid. Его можно увидеть с помощью Grid-инспектора в Firefox.
Определяем размер неявного Grid с помощью grid-auto
Чтобы указать высоту строк сетки, можно использовать свойство grid-auto-row.
.grid {
display: grid;
grid-gap: 10px; /* добавим промежутки для наглядности */
grid-auto-rows: 30px;
}
Мы определили одно значение высоты, и этот стиль будет применен ко всем строкам в Grid.
Создаем явный Grid с помощью grid-template
Теперь определим явный Grid. Создадим сетку с двумя строками высотой 100px.
.grid {
display: grid;
grid-gap: 10px; /* добавим промежутки для наглядности */
grid-auto-rows: 30px;
grid-template-rows: 100px 100px;
}
У первых двух строк высота 100px, а у остальных высота определяется свойством grid-auto-rows. Разница между явным и неявным Grid более очевидна на изображении, приведенном ниже.
Заключение
Свойства grid-template-* используются для создания, размещения и определения размера ячеек в явном Grid. Любая ячейка, которая создается этим свойством, является элементом неявного Grid, размер которого определяется свойством grid-auto-* .