Что такое 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. Его можно увидеть с помощью Grid-инспектора в Firefox.

Работаем с явным и неявным Grid - 2

Определяем размер неявного Grid с помощью grid-auto

Чтобы указать высоту строк сетки, можно использовать свойство grid-auto-row.

.grid {
	display: grid;
	grid-gap: 10px; /* добавим промежутки для наглядности */
	grid-auto-rows: 30px;
}
Определяем размер неявного Grid с помощью grid-auto

Мы определили одно значение высоты, и этот стиль будет применен ко всем строкам в Grid.

Создаем явный Grid с помощью grid-template

Теперь определим явный Grid. Создадим сетку с двумя строками высотой 100px.

.grid {
  display: grid;
  grid-gap: 10px; /* добавим промежутки для наглядности */
  grid-auto-rows: 30px;
  grid-template-rows: 100px 100px;
}
Создаем явный Grid с помощью grid-template

У первых двух строк высота 100px, а у остальных высота определяется свойством grid-auto-rows. Разница между явным и неявным Grid более очевидна на изображении, приведенном ниже.

Создаем явный Grid с помощью grid-template - 2

Заключение

Свойства grid-template-* используются для создания, размещения и определения размера ячеек в явном Grid. Любая ячейка, которая создается этим свойством, является элементом неявного Grid, размер которого определяется свойством grid-auto-* .

Дайте знать, что вы думаете по этой теме материала в комментариях. Мы очень благодарим вас за ваши комментарии, подписки, отклики, дизлайки, лайки!

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

Ангелина Писанюкавтор-переводчик статьи «Understanding the difference between grid-template and grid-auto»