CSS Grid is a 2D layout technology. Flexbox is 1D, Grid is 2D. Since 2017 it has changed web design.
Basics
display: grid. grid-template-columns: 1fr 1fr 1fr.
Lines and tracks
Tracks โ rows and columns. Lines โ borders.
grid-template-columns/rows
200px 1fr 100px โ fixed and flexible.
fr unit
fr is a fraction of the remaining space.
repeat
repeat(4, 1fr) โ 4 equal columns.
auto-fill/auto-fit
repeat(auto-fill, minmax(200px, 1fr)) โ responsive.
grid-column/row
grid-column: 1 / 3 โ span 2 columns.
span
span 2 โ 2 cells wide.
grid-template-areas
Named areas, visual layout. \"header header\", \"sidebar main\", \"footer footer\".
Mobile responsive
Media queries. grid-template-areas changes.
Product grid example
repeat(auto-fill, minmax(250px, 1fr)) + gap.
Flexbox vs Grid
Flexbox 1D, Grid 2D. Often used together.
Support
All modern browsers.
Sayt.uz
Main layout uses Grid template-areas. Blog listing uses an auto-fill grid.