Дані
По краях сітки проміжку немає.
Як влаштована сітка 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. Сітка це передбачає, а решта карток самі переставляться. Ця сторінка складає контейнер; правила для окремих комірок додають руками.