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

CSS Layout: Flexbox & Grid

[frontend]

Every essential Flexbox and CSS Grid property: containers, items, alignment, and spacing, with syntax and real use cases.61 commands · 5 sections

Flexbox and Grid are the two layout systems of modern CSS. This cheatsheet covers the properties you use daily: flex containers and items, grid containers and items, alignment and gap spacing, and the tricks that solve real layout problems.

Every entry shows the property with example values followed by the use case: when and why you reach for it.

Flexbox: Container17

$display: flex

Use case: Turn an element into a flex container: children become flex items on one axis.Example: .nav { display: flex }

$flex-direction: row

Use case: Main axis horizontal: items left to right (default).Example: .toolbar { flex-direction: row }

$flex-direction: column

Use case: Main axis vertical: stack items top to bottom.Example: .card { display: flex; flex-direction: column }

$flex-direction: row-reverse

Use case: Reverse horizontal order: items right to left.Example: .header { flex-direction: row-reverse }

$flex-wrap: wrap

Use case: Allow items to wrap to new lines instead of shrinking.Example: .tags { display: flex; flex-wrap: wrap }

$flex-wrap: nowrap

Use case: Force all items onto one line (default).Example: .status-bar { flex-wrap: nowrap }

$justify-content: space-between

Use case: Main axis: push items apart with space between: navbar layout.Example: .nav { display: flex; justify-content: space-between }

$justify-content: center

Use case: Main axis: center items: hero buttons.Example: .hero { display: flex; justify-content: center }

$justify-content: flex-end

Use case: Main axis: push items to the end.Example: .toolbar { display: flex; justify-content: flex-end }

$justify-content: space-around

Use case: Equal space around each item: half-gaps at the edges.Example: .pagination { display: flex; justify-content: space-around }

$justify-content: space-evenly

Use case: Fully equal gaps everywhere: even at edges.Example: .stats { display: flex; justify-content: space-evenly }

$align-items: center

Use case: Cross axis: center items: the classic vertical centering.Example: .icon-row { display: flex; align-items: center }

$align-items: flex-start

Use case: Cross axis: align items to the start: uneven heights stay top-aligned.Example: .cards { display: flex; align-items: flex-start }

$align-items: stretch

Use case: Items fill the cross axis (default): equal-height rows.Example: .grid-row { display: flex; align-items: stretch }

$gap: 8px

Use case: Space between items: modern, no margin hacks.Example: .chip-row { display: flex; gap: 8px }

$row-gap: 12px; column-gap: 16px

Use case: Separate horizontal and vertical gaps for wrapped flex.Example: .badge-grid { display: flex; flex-wrap: wrap; row-gap: 12px; column-gap: 16px }

$flex-flow: row wrap

Use case: Shorthand for direction + wrap in one line.Example: .cards { flex-flow: row wrap }

Flexbox: Items11

$flex: 1

Use case: Item grows to fill available space, sharing equally with siblings.Example: .search-input { flex: 1 }

$flex: 0 0 200px

Use case: Fixed size: never grow, never shrink, exactly 200px.Example: .sidebar { flex: 0 0 240px }

$flex: 2

Use case: Grow twice as fast as flex: 1 siblings: the 2:1 split layout.Example: .main { flex: 2 } .aside { flex: 1 }

$flex-grow: 0

Use case: Prevent growth: button stays its content size.Example: .btn { flex-grow: 0 }

$flex-shrink: 0

Use case: Prevent shrinking: logos and icons never squish.Example: .logo { flex-shrink: 0 }

$flex-basis: 33.33%

Use case: Base size before growing/shrinking: three equal columns.Example: .col { flex: 1 1 33.33% }

$order: -1

Use case: Reorder items: move an item to the front without touching HTML.Example: .urgent { order: -1 }

$align-self: flex-end

Use case: Override the container's align-items for ONE item.Example: .badge { align-self: flex-end }

$margin-left: auto

Use case: Push an item to the far end: the "auto margin" layout trick.Example: .spacer { margin-left: auto } // in .nav

$margin: auto

Use case: Center an item BOTH ways: the ultimate centering hack.Example: .centered { margin: auto }

$min-width: 0

Use case: Allow flex items to shrink below content size: fixes overflow in text.Example: .title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis }

Grid: Container12

$display: grid

Use case: Turn an element into a grid container.Example: .dashboard { display: grid }

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

Use case: Three equal columns: 1fr = one fraction of free space.Example: .pricing { display: grid; grid-template-columns: 1fr 1fr 1fr }

$grid-template-columns: repeat(12, 1fr)

Use case: Twelve equal columns: the 12-col bootstrap pattern.Example: .page { grid-template-columns: repeat(12, 1fr) }

$grid-template-columns: 200px 1fr

Use case: Fixed sidebar + fluid content.Example: .layout { display: grid; grid-template-columns: 200px 1fr }

$grid-template-columns: minmax(200px, 1fr) 2fr

Use case: Column that never shrinks below 200px.Example: .split { grid-template-columns: minmax(200px, 1fr) 2fr }

$grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))

Use case: Auto-responsive columns: items wrap as space allows. The modern card grid.Example: .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) }

$grid-template-rows: auto 1fr auto

Use case: Header/content/footer rows: the app shell.Example: .app { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh }

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

Use case: Named areas: readable, visual layout definition.Example: .layout { display: grid; grid-template-areas: "header header" "sidebar main" "footer footer"; } .header { grid-area: header }

$grid-auto-rows: 100px

Use case: Default row height for implicitly created rows.Example: .masonry { grid-auto-rows: 100px }

$grid-auto-flow: dense

Use case: Back-fill gaps: dense packing for mixed-size tiles.Example: .tiles { grid-auto-flow: dense }

$grid-template-columns: auto 1fr auto

Use case: Auto-sized edges + fluid middle: nav/status layouts.Example: .toolbar { grid-template-columns: auto 1fr auto }

$column-gap: 16px; row-gap: 24px

Use case: Gaps between grid tracks.Example: .dashboard { gap: 16px } // shorthand

Grid: Items9

$grid-column: span 2

Use case: Item spans 2 columns: feature cards.Example: .featured { grid-column: span 2 }

$grid-column: 1 / 3

Use case: Item from column line 1 to 3: explicit placement.Example: .sidebar { grid-column: 1 / 3 }

$grid-column: 1 / -1

Use case: Span the FULL width: full-width rows in a grid.Example: .banner { grid-column: 1 / -1 }

$grid-row: span 2

Use case: Item spans 2 rows: tall tiles.Example: .tall { grid-row: span 2 }

$grid-row: 1 / 3

Use case: Explicit row placement.Example: .nav { grid-row: 1 / 3 }

$grid-area: 1 / 1 / 3 / 4

Use case: Full placement shorthand: row-start / col-start / row-end / col-end.Example: .hero { grid-area: 1 / 1 / 3 / 4 }

$justify-self: center

Use case: Align one item horizontally inside its cell.Example: .icon { justify-self: center }

$align-self: end

Use case: Align one item vertically: sticky footer buttons.Example: .action { align-self: end }

$grid-column: span 2 / -1

Use case: Span to the end: items that stretch to the right edge.Example: .footer { grid-column: span 2 / -1 }

Alignment & Spacing12

$place-items: center

Use case: Center ALL items in both axes: flex-center equivalent for grid.Example: .modal { display: grid; place-items: center }

$justify-content: center

Use case: Center the whole grid inside the container.Example: .grid { display: grid; justify-content: center }

$align-content: center

Use case: Center grid rows vertically when there is spare space.Example: .grid { display: grid; align-content: center }

$place-content: center

Use case: Center the entire grid both ways: the page-level centering.Example: .screen { display: grid; place-content: center; min-height: 100vh }

$justify-items: stretch

Use case: Items fill their cell horizontally (default): equal-width grid items.Example: .grid { justify-items: stretch }

$align-items: start

Use case: Grid items align to the top of their cells: uneven content heights.Example: .cards { display: grid; align-items: start }

$gap: 16px

Use case: Universal gap shorthand: works in flex AND grid.Example: .layout { display: grid; gap: 16px }

$margin: 0 auto

Use case: Center a block element horizontally: classic, still works.Example: .container { max-width: 1152px; margin: 0 auto }

$padding: 0 16px

Use case: Inset spacing: breathing room inside containers.Example: .card { padding: 16px }

$text-align: center

Use case: Center inline content: text, inline images.Example: .hero h1 { text-align: center }

$aspect-ratio: 16 / 9

Use case: Fixed aspect ratio boxes: video embeds and image placeholders.Example: .thumb { aspect-ratio: 16 / 9; object-fit: cover }

$object-fit: cover

Use case: Crop images to fill their box: image cards without distortion.Example: img.cover { width: 100%; height: 200px; object-fit: cover }

CSS Layout: Flexbox & Grid

Every essential Flexbox and CSS Grid property: containers, items, alignment, and spacing, with syntax and real use cases.

Every entry shows the property with example values followed by the use case: when and why you reach for it.

Flexbox: Container

display: flex: Turn an element into a flex container: children become flex items on one axis.

Example: .nav { display: flex }

flex-direction: row: Main axis horizontal: items left to right (default).

Example: .toolbar { flex-direction: row }

flex-direction: column: Main axis vertical: stack items top to bottom.

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

flex-direction: row-reverse: Reverse horizontal order: items right to left.

Example: .header { flex-direction: row-reverse }

flex-wrap: wrap: Allow items to wrap to new lines instead of shrinking.

Example: .tags { display: flex; flex-wrap: wrap }

flex-wrap: nowrap: Force all items onto one line (default).

Example: .status-bar { flex-wrap: nowrap }

justify-content: space-between: Main axis: push items apart with space between: navbar layout.

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

justify-content: center: Main axis: center items: hero buttons.

Example: .hero { display: flex; justify-content: center }

justify-content: flex-end: Main axis: push items to the end.

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

justify-content: space-around: Equal space around each item: half-gaps at the edges.

Example: .pagination { display: flex; justify-content: space-around }

justify-content: space-evenly: Fully equal gaps everywhere: even at edges.

Example: .stats { display: flex; justify-content: space-evenly }

align-items: center: Cross axis: center items: the classic vertical centering.

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

align-items: flex-start: Cross axis: align items to the start: uneven heights stay top-aligned.

Example: .cards { display: flex; align-items: flex-start }

align-items: stretch: Items fill the cross axis (default): equal-height rows.

Example: .grid-row { display: flex; align-items: stretch }

gap: 8px: Space between items: modern, no margin hacks.

Example: .chip-row { display: flex; gap: 8px }

row-gap: 12px; column-gap: 16px: Separate horizontal and vertical gaps for wrapped flex.

Example: .badge-grid { display: flex; flex-wrap: wrap; row-gap: 12px; column-gap: 16px }

flex-flow: row wrap: Shorthand for direction + wrap in one line.

Example: .cards { flex-flow: row wrap }

Flexbox: Items

flex: 1: Item grows to fill available space, sharing equally with siblings.

Example: .search-input { flex: 1 }

flex: 0 0 200px: Fixed size: never grow, never shrink, exactly 200px.

Example: .sidebar { flex: 0 0 240px }

flex: 2: Grow twice as fast as flex: 1 siblings: the 2:1 split layout.

Example: .main { flex: 2 } .aside { flex: 1 }

flex-grow: 0: Prevent growth: button stays its content size.

Example: .btn { flex-grow: 0 }

flex-shrink: 0: Prevent shrinking: logos and icons never squish.

Example: .logo { flex-shrink: 0 }

flex-basis: 33.33%: Base size before growing/shrinking: three equal columns.

Example: .col { flex: 1 1 33.33% }

order: -1: Reorder items: move an item to the front without touching HTML.

Example: .urgent { order: -1 }

align-self: flex-end: Override the container's align-items for ONE item.

Example: .badge { align-self: flex-end }

margin-left: auto: Push an item to the far end: the "auto margin" layout trick.

Example: .spacer { margin-left: auto } // in .nav

margin: auto: Center an item BOTH ways: the ultimate centering hack.

Example: .centered { margin: auto }

min-width: 0: Allow flex items to shrink below content size: fixes overflow in text.

Example: .title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis }

Grid: Container

display: grid: Turn an element into a grid container.

Example: .dashboard { display: grid }

grid-template-columns: 1fr 1fr 1fr: Three equal columns: 1fr = one fraction of free space.

Example: .pricing { display: grid; grid-template-columns: 1fr 1fr 1fr }

grid-template-columns: repeat(12, 1fr): Twelve equal columns: the 12-col bootstrap pattern.

Example: .page { grid-template-columns: repeat(12, 1fr) }

grid-template-columns: 200px 1fr: Fixed sidebar + fluid content.

Example: .layout { display: grid; grid-template-columns: 200px 1fr }

grid-template-columns: minmax(200px, 1fr) 2fr: Column that never shrinks below 200px.

Example: .split { grid-template-columns: minmax(200px, 1fr) 2fr }

grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)): Auto-responsive columns: items wrap as space allows. The modern card grid.

Example: .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) }

grid-template-rows: auto 1fr auto: Header/content/footer rows: the app shell.

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

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

: Named areas: readable, visual layout definition.

Example: .layout { display: grid; grid-template-areas: "header header" "sidebar main" "footer footer"; } .header { grid-area: header }

grid-auto-rows: 100px: Default row height for implicitly created rows.

Example: .masonry { grid-auto-rows: 100px }

grid-auto-flow: dense: Back-fill gaps: dense packing for mixed-size tiles.

Example: .tiles { grid-auto-flow: dense }

grid-template-columns: auto 1fr auto: Auto-sized edges + fluid middle: nav/status layouts.

Example: .toolbar { grid-template-columns: auto 1fr auto }

column-gap: 16px; row-gap: 24px: Gaps between grid tracks.

Example: .dashboard { gap: 16px } // shorthand

Grid: Items

grid-column: span 2: Item spans 2 columns: feature cards.

Example: .featured { grid-column: span 2 }

grid-column: 1 / 3: Item from column line 1 to 3: explicit placement.

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

grid-column: 1 / -1: Span the FULL width: full-width rows in a grid.

Example: .banner { grid-column: 1 / -1 }

grid-row: span 2: Item spans 2 rows: tall tiles.

Example: .tall { grid-row: span 2 }

grid-row: 1 / 3: Explicit row placement.

Example: .nav { grid-row: 1 / 3 }

grid-area: 1 / 1 / 3 / 4: Full placement shorthand: row-start / col-start / row-end / col-end.

Example: .hero { grid-area: 1 / 1 / 3 / 4 }

justify-self: center: Align one item horizontally inside its cell.

Example: .icon { justify-self: center }

align-self: end: Align one item vertically: sticky footer buttons.

Example: .action { align-self: end }

grid-column: span 2 / -1: Span to the end: items that stretch to the right edge.

Example: .footer { grid-column: span 2 / -1 }

Alignment & Spacing

place-items: center: Center ALL items in both axes: flex-center equivalent for grid.

Example: .modal { display: grid; place-items: center }

justify-content: center: Center the whole grid inside the container.

Example: .grid { display: grid; justify-content: center }

align-content: center: Center grid rows vertically when there is spare space.

Example: .grid { display: grid; align-content: center }

place-content: center: Center the entire grid both ways: the page-level centering.

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

justify-items: stretch: Items fill their cell horizontally (default): equal-width grid items.

Example: .grid { justify-items: stretch }

align-items: start: Grid items align to the top of their cells: uneven content heights.

Example: .cards { display: grid; align-items: start }

gap: 16px: Universal gap shorthand: works in flex AND grid.

Example: .layout { display: grid; gap: 16px }

margin: 0 auto: Center a block element horizontally: classic, still works.

Example: .container { max-width: 1152px; margin: 0 auto }

padding: 0 16px: Inset spacing: breathing room inside containers.

Example: .card { padding: 16px }

text-align: center: Center inline content: text, inline images.

Example: .hero h1 { text-align: center }

aspect-ratio: 16 / 9: Fixed aspect ratio boxes: video embeds and image placeholders.

Example: .thumb { aspect-ratio: 16 / 9; object-fit: cover }

object-fit: cover: Crop images to fill their box: image cards without distortion.

Example: img.cover { width: 100%; height: 200px; object-fit: cover }

Frequently asked questions

What is the difference between Flexbox and Grid?

Flexbox is one-dimensional: it lays items along a single axis and is ideal for navbars, buttons, and small component layouts. Grid is two-dimensional with explicit rows and columns, best for full page layouts.

When should I use align-items vs justify-content?

In Flexbox, justify-content aligns along the main axis and align-items along the cross axis. In Grid, they follow the same rule for the current writing direction: justify aligns inline, align aligns block.

What does flex: 1 mean?

flex: 1 expands to flex-grow: 1, flex-shrink: 1, flex-basis: 0%: the item grows to fill available space and shares it equally with other flex: 1 siblings. Use flex: none to prevent growing or shrinking.

How do I center an element?

For a flex or grid container, margin: auto on the child is the classic trick. For fixed-size elements, absolute positioning with inset: 0 and margin: auto also works. flex centering is the most reliable.