## CSS Layout Systems

### CSS Flexbox
Flexbox is a one-dimensional layout system used to align elements in rows or columns.

### Key properties:
display: flex
flex-direction
justify-content
align-items
gap

### Use cases:
Navigation bars
Centering content
Cards layout

### CSS Grid
Grid is a two-dimensional layout system used for complex page layouts.

### Key properties:
display: grid
grid-template-columns
grid-template-rows
gap

### Use cases:
Page layouts
Dashboards
Galleries

### Flexbox vs Grid
Flexbox → one direction (row OR column)
Grid → rows AND columns
Flexbox for components, Grid for pages