Tailwind CSS Cheatsheet

Grid

Use this Tailwind CSS reference while you build software engineering projects, review code for technical interview prep, or polish examples for a software engineer resume.

Enabling Grid

<div class="grid">...</div>
<div class="inline-grid">...</div>

Grid Template Columns

Define the number (and width) of columns.

Class	CSS
`grid-cols-1`	`grid-template-columns: repeat(1, minmax(0, 1fr))`
`grid-cols-2`	`grid-template-columns: repeat(2, minmax(0, 1fr))`
`grid-cols-3` – `grid-cols-12`	repeat N equal columns
`grid-cols-none`	`grid-template-columns: none`
`grid-cols-subgrid`	`grid-template-columns: subgrid`
`grid-cols-[200px_1fr_2fr]`	custom template

<!-- Three equal columns with gap -->
<div class="grid grid-cols-3 gap-4">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<!-- Responsive columns -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
  ...
</div>

<!-- Custom template -->
<div class="grid grid-cols-[1fr_2fr_1fr] gap-4">
  <aside>Sidebar</aside>
  <main>Content</main>
  <aside>Sidebar</aside>
</div>

Grid Template Rows

Class	CSS
`grid-rows-1` – `grid-rows-6`	repeat N equal rows
`grid-rows-none`	`grid-template-rows: none`
`grid-rows-subgrid`	`grid-template-rows: subgrid`
`grid-rows-[100px_auto_100px]`	custom template

<!-- Full-height page layout -->
<div class="grid grid-rows-[auto_1fr_auto] min-h-screen">
  <header>Header</header>
  <main>Main grows to fill</main>
  <footer>Footer</footer>
</div>

Column Span (col-span)

How many columns a child item occupies.

Class	CSS
`col-span-1` – `col-span-12`	`grid-column: span N / span N`
`col-span-full`	`grid-column: 1 / -1`

<div class="grid grid-cols-12 gap-4">
  <div class="col-span-8">Main content</div>
  <div class="col-span-4">Sidebar</div>
  <div class="col-span-full">Full-width footer row</div>
</div>

Column Start and End

Class	CSS
`col-start-1` – `col-start-13`	`grid-column-start: N`
`col-start-auto`	`grid-column-start: auto`
`col-end-1` – `col-end-13`	`grid-column-end: N`
`col-end-auto`	`grid-column-end: auto`

<!-- Item starts at column 2, ends at column 5 -->
<div class="col-start-2 col-end-5">Spans columns 2-4</div>

<!-- Shorthand using span with explicit start -->
<div class="col-start-3 col-span-2">Starts at 3, spans 2</div>

Row Span (row-span)

Class	CSS
`row-span-1` – `row-span-6`	`grid-row: span N / span N`
`row-span-full`	`grid-row: 1 / -1`

Row Start and End

Class	CSS
`row-start-1` – `row-start-7`	`grid-row-start: N`
`row-end-1` – `row-end-7`	`grid-row-end: N`
`row-start-auto` / `row-end-auto`	auto placement

<!-- Magazine-style layout with a tall featured image -->
<div class="grid grid-cols-3 grid-rows-3 gap-4">
  <div class="col-span-2 row-span-2">Featured</div>
  <div>Small 1</div>
  <div>Small 2</div>
  <div class="col-span-3">Banner</div>
</div>

Grid Auto Flow

Controls how auto-placed items fill the grid.

Class	CSS
`grid-flow-row`	`grid-auto-flow: row` (default)
`grid-flow-col`	`grid-auto-flow: column`
`grid-flow-dense`	`grid-auto-flow: dense`
`grid-flow-row-dense`	`grid-auto-flow: row dense`
`grid-flow-col-dense`	`grid-auto-flow: column dense`

<!-- Fill columns first (creates implicit columns) -->
<div class="grid grid-flow-col grid-rows-3 gap-4">
  <div>1</div><div>2</div><div>3</div>
  <div>4</div><div>5</div><div>6</div>
</div>

<!-- Dense packing fills holes left by spanning items -->
<div class="grid grid-cols-3 grid-flow-dense gap-4">...</div>

Grid Auto Columns / Rows

Size of implicitly created tracks.

Class	CSS
`auto-cols-auto`	`grid-auto-columns: auto`
`auto-cols-min`	`grid-auto-columns: min-content`
`auto-cols-max`	`grid-auto-columns: max-content`
`auto-cols-fr`	`grid-auto-columns: minmax(0, 1fr)`
`auto-cols-[200px]`	`grid-auto-columns: 200px`
`auto-rows-auto`	`grid-auto-rows: auto`
`auto-rows-min`	`grid-auto-rows: min-content`
`auto-rows-max`	`grid-auto-rows: max-content`
`auto-rows-fr`	`grid-auto-rows: minmax(0, 1fr)`
`auto-rows-[100px]`	`grid-auto-rows: 100px`

<!-- Carousel: auto flow columns, fixed height rows -->
<div class="grid grid-flow-col auto-cols-[260px] gap-4 overflow-x-auto">
  <div class="h-40 bg-slate-200 rounded-xl">Card</div>
  <div class="h-40 bg-slate-200 rounded-xl">Card</div>
</div>

Gap

Identical to flexbox — see Flexbox for full table.

<div class="grid grid-cols-3 gap-4">...</div>
<div class="grid grid-cols-3 gap-x-6 gap-y-3">...</div>

Justify Items (Inline Axis, All Cells)

Class	CSS
`justify-items-start`	`justify-items: start`
`justify-items-end`	`justify-items: end`
`justify-items-center`	`justify-items: center`
`justify-items-stretch`	`justify-items: stretch` (default)

Justify Self (Inline Axis, Single Cell)

Class	CSS
`justify-self-auto`	`justify-self: auto`
`justify-self-start`	`justify-self: start`
`justify-self-end`	`justify-self: end`
`justify-self-center`	`justify-self: center`
`justify-self-stretch`	`justify-self: stretch`

Align Items / Align Self / Align Content

Same classes as flexbox (items-*, self-*, content-*) apply identically to grid.

Place Content, Items, and Self

Shorthand that sets both align and justify at once.

Class	CSS
`place-content-center`	`place-content: center`
`place-content-between`	`place-content: space-between`
`place-items-center`	`place-items: center`
`place-items-start`	`place-items: start`
`place-self-center`	`place-self: center`
`place-self-end`	`place-self: end`

<!-- Centering a grid cell's content both axes -->
<div class="grid place-items-center h-32 w-32 bg-slate-100">
  <span>Centered</span>
</div>

Common Grid Patterns

Auto-fill responsive cards (no media queries needed)

<div class="grid gap-6" style="grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))">
  <div class="rounded-xl border p-4">Card</div>
  <div class="rounded-xl border p-4">Card</div>
  <div class="rounded-xl border p-4">Card</div>
</div>

Or with arbitrary value:

<div class="grid grid-cols-[repeat(auto-fill,minmax(240px,1fr))] gap-6">...</div>

Holy grail layout

<div class="grid grid-cols-[200px_1fr_200px] grid-rows-[auto_1fr_auto] min-h-screen">
  <header class="col-span-3 p-4">Header</header>
  <nav class="p-4 border-r">Left nav</nav>
  <main class="p-6">Content</main>
  <aside class="p-4 border-l">Right aside</aside>
  <footer class="col-span-3 p-4">Footer</footer>
</div>

Named grid areas (arbitrary)

<div class="grid [grid-template-areas:'header_header''sidebar_main'] grid-cols-[200px_1fr]">
  <header class="[grid-area:header]">Header</header>
  <nav class="[grid-area:sidebar]">Nav</nav>
  <main class="[grid-area:main]">Main</main>
</div>

Subgrid (v4 / modern browsers)

<div class="grid grid-cols-3 gap-4">
  <div class="grid grid-cols-subgrid col-span-3">
    <!-- children align to parent's column tracks -->
    <span>A</span><span>B</span><span>C</span>
  </div>
</div>