🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
Как устроить адаптивную сетку с CSS Grid
CSS Grid делит один HTML-элемент на невидимые строки и столбцы без дополнительных элементов для каждой ячейки. Если задать только display: grid, получится один столбец, а строки будут добавляться под вложенные элементы.
Сравните проценты и fr. Проценты задают жёсткие доли родительского блока, поэтому колонки общей шириной 100% вместе с промежутком могут выйти за его границы. Единица fr учитывает ширину содержимого и промежутки, затем делит оставшееся место.
Для тренировки соберите календарь из семи колонок через repeat(7, 1fr), добавьте свойство промежутка gap, замените доли на проценты и сузьте блок. В интерактивном руководстве Josh W. Comeau результат можно проверить в примерах.