$devvkit resources --cheatsheet css-layout-—-flexbox-&-grid

CSS Layout — Flexbox & Grid

[frontend]

Flexbox and Grid properties for modern CSS layouts — alignment, sizing, responsive patterns.

CSS Flexbox and Grid are the two modern layout systems that replace floats and table-based layouts. Flexbox is ideal for one-dimensional layouts (rows or columns), while Grid excels at two-dimensional layouts with rows and columns simultaneously.

This cheatsheet covers the essential properties for both systems, including alignment, sizing, and responsive patterns.

Flexbox — Container

$display: flex

Enable Flexbox on a container. Children become flex items.Example: .container { display: flex }

$flex-direction: row | column

Set the main axis direction. Row (default) or column.Example: .nav { display: flex; flex-direction: column }

$flex-wrap: wrap

Allow items to wrap onto multiple lines instead of shrinking.Example: .gallery { display: flex; flex-wrap: wrap; gap: 1rem }

$justify-content: center | space-between

Align items along the main axis.Example: .toolbar { display: flex; justify-content: space-between }

$align-items: center | stretch | flex-start

Align items along the cross axis.Example: .card { display: flex; align-items: center }

$gap: 1rem

Set spacing between flex items (row-gap and column-gap shorthand).Example: .row { display: flex; gap: 12px }

Flexbox — Items

$flex: 1

Shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0. Item grows to fill space.Example: .sidebar { flex: 0 0 250px } .main { flex: 1 }

$align-self: center | stretch

Override align-items for a specific flex item.Example: .logo { align-self: center }

$order: 1

Reorder a flex item. Lower numbers come first.Example: .urgent { order: -1 }

Grid — Container

$display: grid

Enable CSS Grid on a container.Example: .dashboard { display: grid }

$grid-template-columns: 1fr 1fr 1fr

Define the column track sizes. fr units distribute available space.Example: .grid { grid-template-columns: repeat(3, 1fr); gap: 1rem }

$grid-template-rows: auto 1fr auto

Define row track sizes. Classic sticky footer pattern.Example: .page { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh }

grid-template-areas:
  "header header"
  "sidebar main"

Name grid areas for visual layout mapping. Use named grid-area on children.Example: .layout { grid-template-areas: "nav main" "nav footer"; grid-template-columns: 200px 1fr }

Grid — Items

$grid-column: span 2

Make an item span multiple column tracks.Example: .banner { grid-column: 1 / -1 } /* full width */

$grid-column: 1 / 3

Place an item from grid line 1 to line 3.Example: .sidebar { grid-column: 1 / 2; grid-row: 1 / 3 }

$grid-area: header

Assign an item to a named area defined in grid-template-areas.Example: .header { grid-area: header }

Alignment & Spacing

$justify-items: center | stretch

Align grid items along the inline (row) axis within their cells.Example: .grid { justify-items: center }

$align-items: center | stretch

Align grid items along the block (column) axis within their cells.Example: .grid { align-items: start }

$place-items: center

Shorthand for align-items + justify-items. Centers items in their cells.Example: .grid { place-items: center }

$place-content: center

Shorthand for align-content + justify-content. Centers the entire grid.Example: .grid { place-content: center; min-height: 100vh }

CSS Layout — Flexbox & Grid

Flexbox and Grid properties for modern CSS layouts — alignment, sizing, responsive patterns.

This cheatsheet covers the essential properties for both systems, including alignment, sizing, and responsive patterns.

Flexbox — Container

display: flex — Enable Flexbox on a container. Children become flex items.

Example: .container { display: flex }

flex-direction: row | column — Set the main axis direction. Row (default) or column.

Example: .nav { display: flex; flex-direction: column }

flex-wrap: wrap — Allow items to wrap onto multiple lines instead of shrinking.

Example: .gallery { display: flex; flex-wrap: wrap; gap: 1rem }

justify-content: center | space-between — Align items along the main axis.

Example: .toolbar { display: flex; justify-content: space-between }

align-items: center | stretch | flex-start — Align items along the cross axis.

Example: .card { display: flex; align-items: center }

gap: 1rem — Set spacing between flex items (row-gap and column-gap shorthand).

Example: .row { display: flex; gap: 12px }

Flexbox — Items

flex: 1 — Shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0. Item grows to fill space.

Example: .sidebar { flex: 0 0 250px } .main { flex: 1 }

align-self: center | stretch — Override align-items for a specific flex item.

Example: .logo { align-self: center }

order: 1 — Reorder a flex item. Lower numbers come first.

Example: .urgent { order: -1 }

Grid — Container

display: grid — Enable CSS Grid on a container.

Example: .dashboard { display: grid }

grid-template-columns: 1fr 1fr 1fr — Define the column track sizes. fr units distribute available space.

Example: .grid { grid-template-columns: repeat(3, 1fr); gap: 1rem }

grid-template-rows: auto 1fr auto — Define row track sizes. Classic sticky footer pattern.

Example: .page { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh }

grid-template-areas:
  "header header"
  "sidebar main"

— Name grid areas for visual layout mapping. Use named grid-area on children.

Example: .layout { grid-template-areas: "nav main" "nav footer"; grid-template-columns: 200px 1fr }

Grid — Items

grid-column: span 2 — Make an item span multiple column tracks.

Example: .banner { grid-column: 1 / -1 } /* full width */

grid-column: 1 / 3 — Place an item from grid line 1 to line 3.

Example: .sidebar { grid-column: 1 / 2; grid-row: 1 / 3 }

grid-area: header — Assign an item to a named area defined in grid-template-areas.

Example: .header { grid-area: header }

Alignment & Spacing

justify-items: center | stretch — Align grid items along the inline (row) axis within their cells.

Example: .grid { justify-items: center }

align-items: center | stretch — Align grid items along the block (column) axis within their cells.

Example: .grid { align-items: start }

place-items: center — Shorthand for align-items + justify-items. Centers items in their cells.

Example: .grid { place-items: center }

place-content: center — Shorthand for align-content + justify-content. Centers the entire grid.

Example: .grid { place-content: center; min-height: 100vh }