Аристарх Ледецкий // AryaPaw

Двумерная сетка: линии, дорожки, fr, minmax, span и place-items.

Флекс тянет одну ось. Grid сразу рисует колонки и ряды. Таблица в HTML для данных. Сетка в CSS для раскладки: шапка на всю ширину, карточки, подвал.

Контейнер и линии

Контейнер: элемент с display: grid. Прямые дети становятся предметами сетки. Линия режет поле. Между двумя соседними линиями лежит дорожка (колонка или ряд). Клетка: одна ячейка. Область: несколько клеток подряд.

display: grid; grid-template-columns: 1fr 1fr 1fr; два ряда auto. Линии колонок: 1, 2, 3, 4.

Линии считают с 1. -1 это последняя линия с конца.

three-by-two.css

.board {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

Шесть детей сами заполняют два ряда. Ряды auto, пока не задали grid-template-rows.

Дорожки, gap и fr

tracks.css

.board {
  display: grid;
  grid-template-columns: 12rem 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 12px;
}

Три значения в grid-template-columns это три колонки. gap это воздух между дорожками, не margin снаружи карточки.

12rem

1fr

grid-template-columns: 12rem 1fr 1fr. Два 1fr делят свободное место после 12rem и gap, не всю ширину виджета.

fr = fraction, доля свободного места после фиксированных треков и зазоров. Это не «frame» и не em из единиц.

Почему 1fr иногда не делится поровну

Трек по умолчанию не хочет стать уже содержимого. Длинное слово раздувает колонку. Для равных карточек пишите minmax(0, 1fr): ноль разрешает сжаться, 1fr делит остаток.

equal.css

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

verylongunbrokentoken

карточка

minmax(0, 1fr) разрешает колонке сжаться уже содержимого. Без нуля длинный токен раздувает трек.

repeat(3, …) это три одинаковые дорожки. На узкой ширине три колонки часто рано: сначала 1fr, колонки добавляете через min-width. Это разбор на мобильной адаптации.

Занять несколько клеток

Предмет сам садится в следующую свободную клетку. Чтобы шапка пересекла все колонки:

span.css

.hero {
  grid-column: 1 / -1;
}

шапка

меню

фото

цена

grid-column: 1 / -1 у шапки. Остальные предметы занимают по одной клетке.

1 / -1 от первой линии до последней. Не эмулируйте это отрицательным margin.

Выравнивание: place-items

По умолчанию предмет растягивается на клетку (stretch). place-items это сокращение: align-items + justify-items. place-items: center ставит коробку по её ширине и высоте в середину клетки.

place.css

.tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center;
  gap: 8px;
}

по умолчанию

place-items: center

Слева без place-items предмет растягивается на клетку. Справа place-items: center: коробка по контенту и сидит в середине клетки.

Частые значения: start, center, end, stretch. Для одного предмета: place-self, не ломайте всю сетку.

Когда не Grid

Ряд кнопок, «прижать вправо», одна ось и gap между чипами: флекс. Grid, когда карта двумерная и предмет должен сесть и в колонку, и в ряд.

Что здесь нарочно нет

auto-fit / auto-fill, именованные grid-template-areas, subgrid. Когда переварите базу: гайд по grid на Доке.

Display: Grid