CSS Grid Cheat Sheet: Complete Guide with Visual Examples

Why CSS Grid Changed Everything

Before Grid, building a two-dimensional layout in CSS meant fighting the document flow with floats, using table-based hacks, or reaching for a JavaScript library. The challenge was that CSS was fundamentally a one-dimensional layout engine - elements stacked vertically and flowed horizontally, but controlling both axes simultaneously was never first-class.

CSS Grid introduced a true two-dimensional coordinate system directly in CSS. You define tracks (rows and columns) on a container, and child items can be placed into specific cells or spans of cells. The layout engine handles alignment, spacing, and distribution. The result is that designs which previously required hundreds of lines of CSS and JavaScript can be expressed in a dozen lines of Grid.

Grid has full browser support since 2017 and is safe to use in all modern projects without fallbacks.

The Mental Model: Tracks, Lines, and Cells

Grid introduces specific terminology worth understanding before diving into properties:

• Grid container - the element with display: grid
• Grid items - direct children of the container
• Tracks - rows and columns defined by the container
• Lines - the numbered dividers between tracks. A 3-column grid has 4 vertical lines (1, 2, 3, 4). Lines can be named.
• Cell - the intersection of one row track and one column track
• Area - a rectangular group of cells spanning one or more rows and columns

Container Properties

display: grid

.container {
  display: grid;        /* block-level grid container */
  display: inline-grid; /* inline-level grid container */
}

grid-template-columns and grid-template-rows

Define the size and number of tracks. Values can be fixed lengths, percentages, auto, or the Grid-specific fr unit.

.container {
  /* 3 equal columns */
  grid-template-columns: 1fr 1fr 1fr;

  /* Shorthand with repeat() */
  grid-template-columns: repeat(3, 1fr);

  /* Mixed: fixed sidebar, flexible main, fixed sidebar */
  grid-template-columns: 240px 1fr 240px;

  /* Fixed rows */
  grid-template-rows: 60px auto 80px; /* header, content, footer */
}

The fr Unit

The fr (fraction) unit represents a fraction of the available free space in the grid container, after fixed sizes are subtracted. It is the Grid equivalent of Flexbox's flex-grow.

/* 1fr 2fr 1fr: middle column gets twice the space of each side */
grid-template-columns: 1fr 2fr 1fr;

/* After subtracting a 200px sidebar, split remainder equally */
grid-template-columns: 200px 1fr 1fr;

minmax()

Sets a minimum and maximum size for a track. This is the key to responsive Grid without media queries.

/* Column is at least 200px, but grows to fill available space */
grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr);

/* Row is at least 100px, but grows with content */
grid-template-rows: minmax(100px, auto);

repeat() with auto-fill and auto-fit

These are the most powerful features for responsive layouts without media queries:

/* auto-fill: creates as many columns as fit, even empty ones */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

/* auto-fit: same, but collapses empty columns so items stretch */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

The responsive card grid pattern: grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) creates as many 300px+ columns as fit, automatically adjusting as the viewport changes. No media queries needed.

gap

.container {
  gap: 1rem;           /* same gap for rows and columns */
  gap: 1rem 2rem;      /* row-gap column-gap */
  row-gap: 1rem;
  column-gap: 2rem;
}

grid-template-areas

One of Grid's most readable features: name areas of the grid using ASCII art, then assign items to areas by name.

.container {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 60px 1fr 80px;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

A dot (.) represents an empty cell. This syntax makes the layout intent immediately obvious when reading the CSS.

Alignment: justify-items, align-items, place-items

.container {
  /* Aligns items within their cell horizontally */
  justify-items: start | end | center | stretch; /* default: stretch */

  /* Aligns items within their cell vertically */
  align-items: start | end | center | stretch; /* default: stretch */

  /* Shorthand: align-items / justify-items */
  place-items: center;          /* center both axes */
  place-items: start end;       /* align-items: start, justify-items: end */
}

justify-content and align-content

These distribute the grid tracks within the container when the grid is smaller than the container (i.e., when tracks have fixed sizes).

.container {
  justify-content: start | end | center | stretch | space-between | space-around | space-evenly;
  align-content: start | end | center | stretch | space-between | space-around | space-evenly;
}

Item Properties

grid-column and grid-row

Place items by specifying which grid lines they start and end on.

.item {
  /* Span from column line 1 to line 3 (occupies 2 columns) */
  grid-column: 1 / 3;

  /* Using span keyword */
  grid-column: 1 / span 2;  /* start at line 1, span 2 tracks */
  grid-column: span 2;       /* span 2 tracks from auto placement */

  /* Row placement */
  grid-row: 1 / 2;           /* first row */
  grid-row: 2 / span 3;      /* row 2, span 3 rows */
}

grid-area

Can be used in two ways: with named areas (shown above) or as a shorthand for row/column placement:

.item {
  /* row-start / col-start / row-end / col-end */
  grid-area: 1 / 1 / 3 / 4; /* rows 1-3, columns 1-4 */

  /* Or reference a named template area */
  grid-area: header;
}

justify-self and align-self

Override the container's item alignment for a specific item:

.item {
  justify-self: start | end | center | stretch;
  align-self:   start | end | center | stretch;
  place-self: center; /* shorthand for both */
}

Real-World CSS Grid Patterns

Classic page layout (header, sidebar, main, footer)

.page {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
  gap: 0;
}

Responsive card grid (no media queries)

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

This single rule creates a responsive grid that shows 1 column on mobile, 2 on tablet, 3+ on desktop automatically.

Image gallery with a featured item

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
  gap: 1rem;
}
.gallery .featured {
  grid-column: span 2;
  grid-row: span 2;
}

12-column grid system

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}
.col-4 { grid-column: span 4; }
.col-8 { grid-column: span 8; }
.col-6 { grid-column: span 6; }
.col-12 { grid-column: span 12; }

Responsive layout switching with media queries

.layout {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "sidebar"
    "footer";
}
@media (min-width: 900px) {
  .layout {
    grid-template-columns: 1fr 300px;
    grid-template-areas:
      "header  header"
      "main    sidebar"
      "footer  footer";
  }
}

auto-fill vs. auto-fit: The Difference

Both create as many columns as fit. The difference appears when items do not fill all available space:

• auto-fill - fills the row with as many tracks as fit, including empty ones. Items stay at their minimum size.
• auto-fit - collapses empty tracks to zero width. Existing items expand to fill the available space.

/* 2 items in a 900px container with 300px columns: */
/* auto-fill: 3 tracks (one empty), items stay at 300px */
/* auto-fit: 2 tracks (empty collapsed), items stretch to 450px */

grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

Use auto-fill for image galleries where you want consistent item sizes. Use auto-fit for content sections where you want items to stretch to fill the row.

Frequently Asked Questions

When should I use CSS Grid vs. Flexbox?

Use Grid for two-dimensional layouts where you need control over both rows and columns simultaneously: page structure, dashboards, card galleries, and data tables. Use Flexbox for one-dimensional layouts: navigation bars, button groups, card content, centering a single element, and any layout where items flow naturally along a single axis. They are designed to complement each other - use Grid for the page skeleton, Flexbox for the components inside each grid area.

What does 1fr mean in CSS Grid?

The fr unit stands for "fractional unit." It represents one fraction of the available free space in the grid container. If you have three columns of 1fr 1fr 1fr, each gets one-third of the available space. If you have 1fr 2fr, the second column gets twice the space of the first. Free space is calculated after subtracting fixed-size tracks and gaps. Think of fr as a weight, not a percentage.

What is the difference between grid-template-columns and grid-auto-columns?

grid-template-columns explicitly defines the columns of the grid. grid-auto-columns sets the size of any implicitly created columns - columns that appear when items are placed outside the explicit grid. For example, if you define a 3-column grid but a child is positioned at column 5, Grid creates columns 4 and 5 implicitly. grid-auto-columns controls the size of those implicit columns. The same distinction applies to rows with grid-template-rows and grid-auto-rows.

How do I make a full-bleed element in a centered content grid?

A common pattern is a content column with optional full-width sections. Use named lines to achieve this without changing HTML structure:

.article {
  display: grid;
  grid-template-columns:
    [full-start] 1fr
    [content-start] min(720px, 100%) [content-end]
    1fr [full-end];
}
.article > * {
  grid-column: content; /* default: centered content width */
}
.article > .full-bleed {
  grid-column: full; /* spans edge to edge */
}

Can grid items overlap?

Yes. When you manually place items with grid-column and grid-row, multiple items can occupy the same cells. The stacking order follows the DOM order by default (later items appear on top), but you can control it with z-index. This is useful for overlaying a caption on an image, or creating complex layouts where elements visually overlap.

Why is my grid item not respecting its assigned area?

The most common causes are: (1) The item is not a direct child of the grid container - Grid only applies to direct children, not grandchildren. (2) The area name in grid-area does not exactly match the name in grid-template-areas. (3) You have a typo in the template area string - each row must have the same number of columns, and area names in the same row must be contiguous (an area cannot be L-shaped). Use browser DevTools to inspect the Grid overlay and see exactly what tracks and areas are defined.

The Bottom Line

CSS Grid is the layout system CSS always needed. The combination of grid-template-areas for readable layouts, fr units for flexible tracks, and minmax() with auto-fill for responsive design without media queries makes it the most expressive layout tool available in CSS today.

Master five patterns and you can build 90% of layouts: the page skeleton with named areas, the responsive card grid with auto-fill, the 12-column grid system, the sidebar + main layout, and the full-bleed content column. The rest follows from combining these fundamentals.

Ready to minify your CSS? Use our free tool here - open the CSS Minifier. Also see our companion guide, the CSS Flexbox Cheat Sheet.