Cheat Sheet

CSS Layout Cheat Sheet

A practical reference for the two layout systems that replaced floats and tables — Flexbox and CSS Grid. Property-by-property breakdowns first, then copy-paste recipes for the layouts you reach for most.

Flexbox

One-dimensional layout: items flow along a single main axis and wrap onto new lines.

Container properties

set on display: flex

Property	Common values	What it does
`display`	flex \| inline-flex	Turns the element into a flex container; its direct children become flex items.
`flex-direction`	row \| row-reverse \| column \| column-reverse	Sets the main axis along which items are laid out.
`flex-wrap`	nowrap \| wrap \| wrap-reverse	Controls whether items wrap onto new lines when they overflow the container.
`flex-flow`	<flex-direction> <flex-wrap>	Shorthand that combines flex-direction and flex-wrap in one declaration.
`justify-content`	flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly	Distributes items along the main axis.
`align-items`	stretch \| flex-start \| flex-end \| center \| baseline	Aligns items along the cross axis within a single line.
`align-content`	flex-start \| flex-end \| center \| space-between \| space-around \| stretch	Aligns wrapped lines on the cross axis; only takes effect with multiple lines.
`gap`	<length>	Sets the space between items on both axes.
`row-gap`	<length>	Sets the space between flex lines.
`column-gap`	<length>	Sets the space between items within a line.
`place-content`	<align-content> <justify-content>	Shorthand for align-content and justify-content together.

Item properties

set on the flex children

Property	Common values	What it does
`flex-grow`	<number>	How much the item grows to fill available free space on the main axis.
`flex-shrink`	<number>	How much the item shrinks when there is not enough room.
`flex-basis`	auto \| <length> \| <percentage>	Initial main-axis size before flex-grow and flex-shrink are applied.
`flex`	<grow> <shrink> <basis>	Shorthand for the three values above; flex: 1 equals 1 1 0%.
`align-self`	auto \| flex-start \| flex-end \| center \| baseline \| stretch	Overrides align-items for this single item.
`order`	<integer>	Changes the visual order of the item without touching the DOM.

CSS Grid

Two-dimensional layout: items are placed into rows and columns at the same time.

Container properties

set on display: grid

Property	Common values	What it does
`display`	grid \| inline-grid	Turns the element into a grid container.
`grid-template-columns`	none \| <track>…	Defines column tracks, e.g. 1fr 2fr or repeat(3, 1fr).
`grid-template-rows`	none \| <track>…	Defines row tracks.
`grid-template-areas`	<string>+	Names regions using ASCII-art strings for grid-area placement.
`grid-template`	none \| <rows> / <columns>	Shorthand for template rows, columns and areas.
`gap`	<row-gap> <column-gap>	Space between rows and columns; grid-gap is the legacy alias.
`row-gap`	<length>	Space between rows.
`column-gap`	<length>	Space between columns.
`justify-items`	start \| end \| center \| stretch	Aligns items horizontally within their grid area.
`align-items`	start \| end \| center \| stretch \| baseline	Aligns items vertically within their grid area.
`place-items`	<align-items> <justify-items>	Shorthand for both; place-items: center centers everything.
`justify-content`	start \| end \| center \| stretch \| space-between \| space-around \| space-evenly	Distributes the whole grid along the row axis when it is narrower than the container.
`align-content`	start \| end \| center \| stretch \| space-between \| space-around \| space-evenly	Distributes the whole grid along the column axis.
`place-content`	<align-content> <justify-content>	Shorthand for both content distributions.
`grid-auto-flow`	row \| column \| dense	Controls placement order for auto-placed items; dense backfills holes.
`grid-auto-rows`	<track-size>	Default height for implicitly-created rows.
`grid-auto-columns`	<track-size>	Default width for implicitly-created columns.

Item properties

set on the grid children

Property	Common values	What it does
`grid-column`	grid-column-start / grid-column-end	Places an item across columns, e.g. 1 / 3 or span 2.
`grid-row`	grid-row-start / grid-row-end	Places an item across rows.
`grid-area`	<name> \| row-start / col-start / row-end / col-end	Assigns the item to a named area or sets all four lines at once.
`justify-self`	start \| end \| center \| stretch	Overrides justify-items for this single item.
`align-self`	start \| end \| center \| stretch \| baseline	Overrides align-items for this single item.
`place-self`	<align-self> <justify-self>	Shorthand for both self alignments.

Layout recipes

Copy-paste patterns for the most common layouts. Click Copy to grab the full snippet.

Perfect centering

Center any child both horizontally and vertically. The grid version needs just one line; the flexbox alternative is equally common.

/* Grid — shortest way */
.center {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

/* Flexbox alternative */
.center-flex {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

Holy grail layout

Classic header / nav / main / aside / footer with a fluid center column. grid-template-areas makes the skeleton readable.

.holy-grail {
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  min-height: 100vh;
  gap: 1rem;
}
.holy-grail > header { grid-area: header; }
.holy-grail > nav    { grid-area: nav; }
.holy-grail > main   { grid-area: main; }
.holy-grail > aside  { grid-area: aside; }
.holy-grail > footer { grid-area: footer; }

Responsive equal-width cards

Auto-fitting columns that wrap on their own: each card is at least 220px wide and stretches to fill the last row. No media queries needed.

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

Sticky footer

Make a short page still push the footer to the bottom of the viewport. flex: 1 lets the main area absorb all leftover space.

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.app > main { flex: 1; }

Media object

Icon/avatar next to a fluid text block. The body grows to fill the row while the media stays fixed.

.media {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.media > .media-body { flex: 1; }