Layout
Modern layout is built mostly with flexbox and grid. Learn those two, plus positioning and stacking, and you can build almost any screen you can draw.
Not yet reviewedLevel
Terms
- BeginnerFlexboxFlexbox lays out items along one direction, a row or a column, and shares the available space between them.Not yet reviewed
- IntermediateCSS GridGrid lays out items in rows and columns at the same time, so you control both directions.Not yet reviewed
- BeginnerAlignmentAlignment properties such as justify-content and align-items control how items sit along the main axis and the cross axis in flex and grid.Not yet reviewed
- BeginnerGapThe gap property sets the space between items in flex and grid layouts without extra margins.Not yet reviewed
- BeginnerCenteringCentering is placing an element in the middle of its container, horizontally, vertically or both.Not yet reviewed
- IntermediateAspect ratioThe aspect-ratio property keeps an element at a fixed width to height ratio, such as 16 / 9.Not yet reviewed
- BeginnerPositionThe position property controls how an element is placed: static, relative, absolute, fixed or sticky.Not yet reviewed
- Intermediatez-index and stackingThe z-index property sets which overlapping element appears on top.Not yet reviewed
Articles
A Complete Guide to CSS Flexbox
A property by property guide to flexbox with diagrams and examples.
A Complete Guide to CSS Grid Layout
The matching guide for grid, with every property explained visually.
Know more about Layout?
Suggest a term, a change, or a resource. No account needed.
Suggest a change