Grid vs Flexbox
Flexbox is one-dimensional — it handles either rows or columns. CSS Grid is two-dimensional and handles both simultaneously. Use Flexbox for component-level layouts and Grid for page-level layouts. In practice, most modern UIs use both.
Core Grid Concepts
display: grid creates a grid container. grid-template-columns: repeat(3, 1fr) creates three equal columns. The fr unit represents a fraction of the available space. gap sets the gutter between rows and columns.
Placing Items
grid-column: 1 / 3 spans from column line 1 to line 3. grid-area allows naming sections of the grid, enabling layout changes with just CSS. auto-fill creates as many columns as fit, while auto-fit collapses empty tracks.
Responsive Grid Patterns
The pattern grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) creates a fully responsive grid that adjusts column count based on available width — with no media queries required.
