35 lines
612 B
Markdown
35 lines
612 B
Markdown
## 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 |