612 B
612 B
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