Данные
По краям сетки промежутка нет.
Как устроена сетка CSS Grid
Три строки, с которых всё начинается
display: grid включает сетку, grid-template-columns описывает колонки, grid-template-rows — строки. Дальше элементы внутри сами встают в ячейки, по очереди, слева направо. Ничего дополнительного детям прописывать не нужно.
1fr — это доля, а не ширина
1fr означает «одна доля свободного места». Три колонки по 1fr поделят контейнер на три равные части, и промежутки из этого места вычтены заранее — именно поэтому сетка не вылезает за край, в отличие от вёрстки на процентах.
repeat() лишь сокращает запись
repeat(3, 1fr) — это то же самое, что 1fr 1fr 1fr. Польза начинается там, где колонок двенадцать или где вместо числа стоит ключевое слово.
auto-fit и auto-fill
Оба говорят браузеру: «посчитай количество колонок сам, под ширину контейнера». Вместе с minmax(240px, 1fr) это даёт адаптивную сетку без единого медиазапроса: колонка никогда не будет уже 240 пикселей, а сколько их станет — решает ширина.
Разница между ними одна. Когда колонок хватает не на весь ряд, auto-fit растягивает имеющиеся на всё место, а auto-fill оставляет пустые дорожки и колонки стоят узкими. Для карточек обычно берут auto-fit.
gap читается со строк
gap: 16px 24px — это 16 между строками и 24 между колонками, именно в таком порядке. Если числа одинаковые, пишут одно. По внешним краям сетки промежутка нет никогда.
Частые вопросы о CSS Grid
Grid или Flexbox?
Grid — когда вы описываете раскладку в двух направлениях сразу: строки и колонки. Flexbox — когда элементы стоят в один ряд или одну колонку и должны сами распределить место. Галерея карточек — grid, панель кнопок — flex.
Сколько строк нужно описывать?
Обычно ни одной. Если элементов больше, чем ячеек, браузер добавляет строки сам. grid-template-rows нужен тогда, когда строкам надо задать высоту.
Почему колонки вылезают за контейнер?
Самая частая причина — длинный текст или картинка, которая не сжимается. 1fr означает «минимум по содержимому», поэтому широкое содержимое раздвигает колонку. Лечит minmax(0, 1fr) вместо 1fr.
Нужны ли медиазапросы?
Для сетки карточек — нет. repeat(auto-fit, minmax(240px, 1fr)) уже переставляет колонки под любую ширину. Медиазапрос остаётся для случаев, когда на мобильном должна быть другая раскладка, а не просто меньше колонок.
Как сделать, чтобы одна карточка занимала две колонки?
Дописать ей grid-column: span 2. Сетка это предусматривает, а остальные карточки переставятся сами. Эта страница собирает контейнер; правила для отдельных ячеек добавляют руками.