Урок 05 · 11 хв
Grid: колонки й ряди
Двовимірна сітка. repeat і minmax — щоб не рахувати пікселі вручну.
display: grid. grid-template-columns: 1fr 2fr — дві колонки, друга ширша. repeat(3, 1fr) — три рівні. Картки: repeat(auto-fit, minmax(16rem, 1fr)) самі переносяться. grid-gap застарів як назва: пиши gap.
grid-column: 1 / -1— елемент на всю ширину сітки.- Області
grid-template-areasчитабельні для шапки/сайдбара. Для списку карток не обов'язкові. - Не клади grid на кожен span. Сітка — розкладка секції.
Перевірка
Закріпи, поки не пішов далі
1.
1fr 1frце2. auto-fit + minmax навіщо
3. Ряд іконок у шапці — частіше