Как использовать нечетный размер трека на вашей CSS-сетке

До сих пор наши учебные пособия по CSS были в основном сосредоточены на явных значениях - размерах треков, которые мы явно определили. Мы использовали строки размером 200px или, возможно, столбцы шириной 1fr, и мы четко указали, сколько из них мы хотим. Но что, если мы не знаем (или не хотим брать на себя обязательства), сколько треков мы хотим? Вот где неявные ценности вступают в игру - давайте посмотрим.

Стартовая сетка

Вот базовая сетка, которую вы можете использовать, чтобы следовать за ней. Он дает нам контейнер сетки с 9 элементами сетки. Ширины или количества столбцов еще не определены, поэтому каждый элемент заполняет максимальную ширину:

Определение только одной колонки

Представим себе, что нам нужен один столбец слева, и мы точно знаем, насколько мы это хотим: 300 пикселей. Мы можем определить, добавляя столбцы grid-template: 300px; к нашему контейнеру сетки. Но нам не дадут никаких других столбцов, если мы не будем их явно определять:

То есть, если мы явно не говорим, что мы хотим, чтобы один из элементов сетки был помещен в (например) столбец 3 в строке 1:

.item-3 {
  grid-column: 3;
  grid-row: 1;
}

Это дает дополнительные столбцы вне нашей определенной сетки, потому что CSS Grid будет использовать доступное пространство и алгоритм автоматического размещения, чтобы выяснить, где все остальное.

Это замечательно, и Grid сделает предположения, даже если мы хотим иметь больше столбцов, без необходимости определять их. Но что, если мы хотим, чтобы эти подразумеваемые треки, как многие бывают, имели определенную ширину? Именно здесь вступают в действие сетка-авто-столбцы.

Скажите «Привет» сетке-авто-столбцам

Если мы хотим, чтобы все столбцы, кроме первого, были шириной в 100 пикселей, мы могли бы косвенно заявить, что:

grid-auto-columns: 100px;

Сопряженный с нашим явным значением, мы получаем лучшее из обоих миров. Здесь мы говорим, что мы хотим, чтобы первый столбец был 1fr (что он занимает одну долю от того, какое пространство осталось - авто будет иметь такой же эффект здесь) и что любые другие столбцы после этого должны быть точно равны 100px:

grid-template-columns: 1fr;
grid-auto-columns: 100px;

Это дает нам следующее:

И если мы укажем, что элемент 3 действительно должен быть помещен в столбец 5, в строке 1, Grid знает, как широко использовать любые дополнительные столбцы, потому что это подразумевается.

Здесь мы не ограничиваемся значениями пикселей; мы могли бы использовать единицы дробей, единицы em, даже ноту minmax (), о которой мы говорили в предыдущих уроках.

Не забывать сетку-авто-строки

Само собой разумеется, что grid-auto-rows будет делать то же самое для строк, что и для столбцов grid-auto-columns. Вот пример, где все строки, кроме первых двух, фиксируются на высоте 200 пикселей.

Вывод

Многие свойства Grid имеют значения по умолчанию, которые будут заботиться о вас, если вы не определяете ничего другого, но в некоторых случаях нам нужно хотя бы подразумевать то, что мы хотим. При неявном определении размера дорожки мы можем указать, какой размер должны быть для любых дополнительных строк или столбцов, если они когда-либо понадобятся.

Прочитайте больше

• Неявная размера трека спецификация