CSS Flexbox & Grid
Everything you need to lay out a page with Flexbox (one direction) and Grid (rows and columns). Click a rule to copy it.
Nothing matches your search.
Flexbox: the container
- Put children in a row
- Stack children (row, row-reverse, column-reverse)
- Let items move to the next line
- Space between items
- Along the row: flex-start, center, flex-end, space-between, space-around, space-evenly
- Across the row: stretch (default), flex-start, center, flex-end, baseline
- How wrapped lines are spaced
Flexbox: the items
- Grow to fill the free space equally
- Fixed 200px: don’t grow, don’t shrink
- Take twice as much free space
- Never get smaller than its size
- Starting size before growing or shrinking
- Align one item differently
- Move an item first (visual only)
- Push an item (and those after it) to the end
- Let long text shrink inside a flex item
Grid: the container
- Turn on Grid
- Two columns: fixed sidebar and the rest
- Three equal columns
- As many columns as fit, at least 240px: responsive without media queries
- Header, stretching content, footer
- Row gap, column gap
- Align items inside their cells horizontally
- Align items inside their cells vertically
- Fill holes left by bigger items
Grid: areas and placement
- Draw the layout with names
- Put an item in a named area
- Span every column
- Span two columns
- From row line 2 to 4
- Align one item horizontally in its cell
- Center one item both ways
Recipes
- Center anything, both ways
- Center with Flexbox
- Footer at the bottom of short pages
- Tags or buttons that wrap
- One column on small screens
- Keep a box’s shape
Flexbox for one direction (a row or a column); Grid when you need rows and columns at once.