Что такое 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-* .

Пожалуйста, оставьте ваши отзывы по текущей теме статьи. За комментарии, подписки, дизлайки, лайки, отклики низкий вам поклон!