CSS Grid — 2D layout технология. Flexbox 1D, Grid 2D. С 2017 года меняет веб-дизайн.
Основы
display: grid. grid-template-columns: 1fr 1fr 1fr.
Lines и tracks
Tracks — ряды и столбцы. Lines — границы.
grid-template-columns/rows
200px 1fr 100px — фиксированные и адаптивные.
fr единица
fr — fraction остаточного пространства.
repeat
repeat(4, 1fr) — 4 равных столбца.
auto-fill/auto-fit
repeat(auto-fill, minmax(200px, 1fr)) — responsive.
grid-column/row
grid-column: 1 / 3 — 2 столбца ширина.
span
span 2 — 2 cells.
grid-template-areas
Named areas, visual layout. \"header header\", \"sidebar main\", \"footer footer\".
Mobile responsive
Media queries. grid-template-areas меняется.
Product grid пример
repeat(auto-fill, minmax(250px, 1fr)) + gap.
Flexbox vs Grid
Flexbox 1D, Grid 2D. Часто вместе.
Поддержка
Все современные браузеры.
Сайт.uz
Главный layout — Grid template-areas. Блог список — auto-fill grid.