От автора: В этой статье объясняется разница между явными и неявными сетками в CSS Grid.
CSS grid layout использует концепцию явной и неявной сетки. Построение сеток CSS без нее не обходится. Это ключевая концепция, которую вы должны знать, иначе вы можете получить кучу строк или столбцов, которых не ожидали!
Явные и неявные сетки
Явная сетка является сеткой, которую вы определяете с помощью свойств grid-template-rows, grid-template-columns и grid-template-areas.
Тем не менее, у вас все равно могут быть элементы, которые не вписываются в явно заданную сетку. Например, допустим, вы определили сетку, которая может вместить только 6 элементов сетки, но контейнер сетки фактически содержит 9 элементов. Только 6 элементов поместятся в явную сетку, а 3 останутся. Здесь в игру вступает неявная сетка.
Неявная сетка автоматически генерируется контейнером сетки, когда элементы сетки размещены вне явной сетки. Контейнер сетки генерирует неявные треки сетки, добавляя неявные линии сетки. Эти линии вместе с явной сеткой образуют неявную сетку. Вот пример:
<!doctype html>
<title>Example</title>
<style>
#grid { display: grid; grid-template-rows: 60px 60px; grid-template-columns: 1fr 1fr; grid-gap: 10px; }
#grid > div { padding: .5em; background: gold; text-align: center;
}
</style>
<div id="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div>
</div>В этом примере мы явно определяем двая ряда и две колонки. Это будет соответствовать четырем элементам сетки. Однако существует шесть элементов сетки, поэтому для размещения двух дополнительных элементов была создана неявная сетка. Это полезная вещь. Если бы неявная сетка не была создана, два дополнительных элемента, вероятно, могли бы создать беспорядок в сетке.
Установка размера трека в неявных сетках
Вы можете заметить, что дополнительный ряд не такой высокий, как предыдущие два. Это потому, что мы устанавливаем высоту ряда, используя свойство grid-template-rows, но это относится только к рядам в явной сетке. Высота ряда в неявной сетке должна быть установлена с помощью свойства grid-auto-rows. Но поскольку мы этого не делали, неявный ряд использует размер трека auto (который основан на контенте).
Вот как определяются свойства размера трека:
Свойства определения размера трека явной сетки по сравнению со свойствами определения размера трека неявной сетки
Явная сетка использует grid-template-rows и grid-template-columns.
Неявная сетка использует grid-auto-rows и grid-auto-columns.
В следующем примере мы делаем все явные и неявные строки одинаковой высоты (60px). Для этого мы добавляем свойство grid-auto-rows, чтобы установить высоту неявно сгенерированной строки:
<!doctype html>
<title>Example</title>
<style>
#grid { display: grid; grid-template-rows: 60px 60px; grid-template-columns: 1fr 1fr; grid-gap: 10px; grid-auto-rows: 60px; }
#grid > div { padding: .5em; background: gold; text-align: center;
}
</style>
<div id="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div>
</div>auto-flow для рядов и колонок
До сих пор мы создавали дополнительные ряды для размещения дополнительных элементов сетки. Но что, если вместо этого нам нужны дополнительные колонки? Это можно сделать с помощью свойства grid-auto-flow.
Это свойство позволяет указать, использовать ли ряды или колонки для автоматически размещаемых элементов. Другими словами, вы можете указать, будет ли неявная сетка увеличивать ряды или колонки. Начальное значение свойства — row, так что это объясняет, почему в приведенном выше примере добавлены дополнительные ряды вместо колонок. Если вы предпочитаете использовать столбцы, вы можете сделать это:
grid-auto-flow: column;
Это обеспечит размещение дополнительных элементов в неявных колонках, а не в рядах. Вот что происходит, когда мы применим это к первому примеру:
<!doctype html>
<title>Example</title>
<style>
#grid { display: grid; grid-template-rows: 80px 80px; grid-template-columns: 1fr 1fr; grid-gap: 10px; grid-auto-flow: column; }
#grid > div { padding: .5em; background: gold; text-align: center;
}
</style>
<div id="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div>
</div>Конечно, вы можете пойти дальше и использовать свойство grid-auto-columns, чтобы изменить ширину автоматически сгенерированной колонки. Поэтому, если вы хотите, чтобы все вышеперечисленные колонки были одинаковой ширины, вам нужно использовать grid-auto-columns: 1fr.
Обратите внимание, что, устанавливая для grid-auto-flow — column, вы изменяете фактический поток элементов сетки. Вы можете заметить, что элементы сетки в приведенном выше примере теперь размещаются вдоль колонок, а не рядов.
Ключевое слово dense
Свойство grid-auto-flow также имеет дополнительное ключевое слово dense, которое может помочь сохранить вашу сетку компактной и предотвратить возникновение множества пробелов из — за несоответствия размером элементов сетки. Например, вы можете превратить эту сетку:
Пример сетки без ключевого слова dense
В следующее:
Пример сетки с ключевым словом dense
Использование этого ключевого слова может привести к тому, что элементы будут отображаться не по порядку (поскольку более поздние элементы могут быть возвращены назад и заполнить пробелы, появившиеся ранее), поэтому это не подходит для любой ситуации. Ознакомьтесь с разделом по grid-auto-flow для получения дополнительной информации.
Источник: https://www.quackit.com/
Редакция: Команда webformyself.