Разница между явными и неявными гридами
Grid Layout наконец-то дает нам возможность определять сетки в CSS и размещать элементы в ячейках сетки. Само по себе это здорово, но тот факт, что нам не нужно указывать каждую дорожку и нам не нужно размещать каждый элемент вручную, делает новый модуль еще лучше. Сетки достаточно гибкие, чтобы адаптироваться к своим элементам.
Все это обрабатывается так называемой явной и неявной сеткой.
Явные сетки
Мы можем определить фиксированное количество строк и дорожек, которые образуют сетку, используя свойства grid-template-rows, grid-template-columns и grid-template-areas. Эта определенная вручную сетка называется явной сеткой.
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
grid-gap: 20px;
}
Повторение треков
Когда мы определяем grid-template-columns: 1fr 1fr 1fr 1fr;, мы получаем четыре вертикальных трека, каждая шириной 1fr. Мы можем автоматизировать это, используя такие обозначения grid-template-columns: repeat(4, 1fr);. Первый аргумент указывает количество повторов, второй - список треков, который повторяется это количество раз.
Трек - лист? Да, вы действительно можете повторять несколько треков.
Автоматический повтор треков
Обозначение повторения весьма полезно, но его можно автоматизировать еще больше. Вместо того чтобы устанавливать фиксированное число повторений мы можем использовать ключевые слова auto-fill и auto-fit.
Автозаполнение треков
Ключевое слово auto-fill создает так много треков , как вписываться в контейнер сетки, не вызывая его переполнение.
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
grid-gap: 20px;
}
Обратите внимание, что repeat(auto-fill, 1fr); будет создана только одна дорожка, потому что одна дорожка с шириной 1fr, уже заполняющей весь контейнер сетки, является недопустимым объявлением (может быть, оно изменилось? Я не знаю).
Автоматическая подгонка треков
Ключевое слово auto-fit ведет себя так же, как auto-fill, за исключением того, что после размещения элемента сетки будет создавать только количество дорожек, которые необходимы.
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, 100px);
grid-gap: 20px;
}
В примере, используемом в этом разделе, сетка будет выглядеть одинаково с repeat(auto-fit, 100px); и repeat(4, 100px);. Разница видна, когда элементов сетки больше 4.
Если элементов больше, auto-fit создает больше столбцов.
С другой стороны, если в нотации повторения используется фиксированное количество вертикальных дорожек и количество элементов превышает это значение, добавляются дополнительные строки.
Я использовал grid-template-columns в приведенных выше примерах для удобства, но все правила применимы и к grid-template-rows.
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
grid-template-rows: repeat(auto-fill, 100px);
grid-gap: 20px;
height: 100%;
}
html, body {
height: 100%;
}
Неявные сетки
Если элементов сетки больше, чем ячеек в сетке, или когда элемент сетки размещается за пределами явной сетки, контейнер сетки автоматически создает дорожки сетки, добавляя линии сетки в сетку. Явная сетка вместе с этими дополнительными неявными дорожками и линиями образует так называемую неявную сетку.
.item:first-child {
grid-column-start: -1;
}
.item:nth-child(2) {
grid-row-start: 4;
}
Ширина и высота неявных дорожек устанавливаются автоматически. Они достаточно велики, чтобы соответствовать размещенным элементам сетки, но это поведение по умолчанию можно изменить.
Определение размера неявных дорожек
Свойства grid-auto-rows и grid-auto-columns дают нам контроль над размером неявных дорожек.
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px 100px;
grid-gap: 20px;
grid-auto-columns: 200px;
grid-auto-rows: 60px;
}
Неявные дорожки теперь всегда будут иметь ширину 200px и высоту 60px, независимо от того, подходит ли элемент сетки или нет.
Вы можете сделать размер неявных дорожек более гибким, указав диапазон с помощью нотации minmax().
.grid {
grid-auto-columns: minmax(200px, auto);
grid-auto-rows: minmax(60px, auto);
}
Неявные дорожки теперь имеют ширину не менее 200 пикселей и высоту 60 пикселей, но будут расширяться, если этого требует контент.
Расширение сетки до начала
Неявные треки нельзя просто добавить в конец явной сетки. Также может случиться так, что явную сетку нужно расширить до начала.
.item:first-child {
grid-row-end: 2;
grid-row-start: span 2;
}
.item:nth-child(2) {
grid-column-end: 2;
grid-column-start: span 2;
}
Каждый элемент заканчивается на второй строке и занимает 2 ячейки (одну по вертикали, другую по горизонтали). Поскольку перед второй линией находится только одна ячейка, в сетку в начале каждой стороны добавляется еще одна неявная дорожка.
Автоматическое размещение
Как уже упоминалось, неявные треки также добавляются, если количество элементов превышает количество ячеек. По умолчанию алгоритм автоматического размещения размещает элементы, последовательно заполняя каждую строку, добавляя новые строки по мере необходимости. Мы можем указать, как автоматически размещенные элементы перетекают в сетку, используя свойство grid-auto-flow.
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px 100px;
grid-gap: 20px;
grid-auto-flow: column;
}
Вместо строк столбцы заполняются элементами и создаются дополнительные неявные столбцы.
Не определять явную сетку
В связи с тем, что можно автоматически определять размер ячеек с помощью, grid-auto-rows и grid-auto-columns не обязательно определять явную сетку.
.grid {
display: grid;
grid-auto-columns: minmax(60px, 200px);
grid-auto-rows: 60px;
grid-gap: 20px;
}
.item:first-child {
grid-row: span 2;
}
.item:nth-child(2) {
grid-column: 1 / span 2;
}
.item:nth-child(5) {
grid-column: 3;
}
Если полагаться исключительно на неявную сетку, то в сочетании с явным размещением может возникнуть путаница и трудность для понимания. В этом примере первый элемент размещается auto и занимает 2 строки, второй элемент размещается явно в первом столбце и занимает 2 столбца, образуя вторую вертикальную дорожку. Третий и четвертый элементы фактически будут автоматически помещены в четвертую строку, но пятый элемент будет явно помещен в ранее несуществующий третий столбец. Это создает третью вертикальную дорожку, и из-за автоматического размещения сетки третий элемент перемещается на строку вверх, заполняя пространство.
Заключение
Эта статья не охватывает всего, что нужно знать о явной и неявной сетке, но она должна дать вам больше, чем твердое понимание концепции. Знание того, почему и как создаются неявные линии и треки, жизненно важно для работы с Grid Layout.
