Чем отличается 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-template от grid-auto

Кажется, что ничего не произошло. Но фактически мы только что создали неявный Grid. Его можно без труда увидеть при помощи Grid-инспектора в Firefox.

Чем отличается grid-template от grid-auto

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

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

.grid {display: grid;grid-gap: 10px; /* добавим промежутки для наглядности */grid-auto-rows: 30px;}
Чем отличается grid-template от grid-auto

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

Создаем явный Grid при помощи grid-template

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

.grid { display: grid; grid-gap: 10px; /* добавим промежутки для наглядности */ grid-auto-rows: 30px; grid-template-rows: 100px 100px;}
Чем отличается grid-template от grid-auto

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

Чем отличается grid-template от grid-auto

Заключение

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *