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