Hack University
← All cheatsheets
CSS
Grid

CSS Cheatsheet

Grid

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

Enabling Grid

.container {
  display: grid;
  display: inline-grid;
}
/* Direct children are grid items */

Defining Columns and Rows

/* grid-template-columns */
grid-template-columns: 200px 1fr 200px;
grid-template-columns: repeat(3, 1fr);               /* 3 equal columns */
grid-template-columns: repeat(3, 1fr 2fr);           /* 6 columns alternating */
grid-template-columns: repeat(auto-fill, 200px);     /* as many 200px cols as fit */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* responsive */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));  /* collapse empties */
grid-template-columns: [sidebar-start] 260px [sidebar-end main-start] 1fr [main-end];

/* grid-template-rows */
grid-template-rows: auto;
grid-template-rows: 80px 1fr auto;
grid-template-rows: repeat(4, minmax(100px, auto));

/* shorthand: rows / columns */
grid-template: 80px 1fr / 200px 1fr;

fr Unit and minmax()

/* fr = fraction of remaining free space */
grid-template-columns: 1fr 2fr; /* 1/3 and 2/3 */

/* minmax(min, max) */
grid-template-columns: minmax(200px, 1fr) 3fr;
grid-template-columns: minmax(0, 1fr);   /* allow shrinking below content */
grid-template-rows: minmax(50px, auto);

repeat() and auto-fill vs auto-fit

/* auto-fill: always creates tracks, even empty ones */
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

/* auto-fit: collapses empty tracks, items stretch */
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

Gap

gap: 1rem;           /* row and column gap */
gap: 1rem 2rem;      /* row-gap  column-gap */
row-gap: 1rem;
column-gap: 2rem;

Named Template Areas

.layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
header  { grid-area: header; }
aside   { grid-area: sidebar; }
main    { grid-area: main; }
footer  { grid-area: footer; }
/* Use . for empty cells: "header . main" */

grid-template Shorthand (rows / columns + areas)

grid-template:
  "header header" 80px
  "sidebar main"  1fr
  "footer footer" auto
  / 260px 1fr;

Placing Items with Line Numbers

/* grid-column: start / end (line numbers, 1-indexed) */
.item {
  grid-column: 1 / 3;      /* spans columns 1 and 2 */
  grid-column: 1 / -1;     /* span all columns */
  grid-column: 2 / span 2; /* start at 2, span 2 tracks */
  grid-row: 1 / 3;
  grid-row: span 2;         /* span 2 rows from auto-placed position */
}

/* Longhand */
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;

Placing Items with Named Lines

.container {
  grid-template-columns: [col-start] 1fr [col-mid] 1fr [col-end];
}
.item {
  grid-column: col-start / col-end;
}

grid-area Shorthand

/* row-start / col-start / row-end / col-end */
.item { grid-area: 1 / 2 / 3 / 4; }

/* Named area */
.item { grid-area: sidebar; }

Auto Placement — grid-auto-flow

grid-auto-flow: row;          /* default — fills rows first */
grid-auto-flow: column;       /* fills columns first */
grid-auto-flow: row dense;    /* fill gaps with smaller items */
grid-auto-flow: column dense;

Implicit Grid Tracks — grid-auto-rows/columns

/* Size of auto-created tracks */
grid-auto-rows: 200px;
grid-auto-rows: minmax(100px, auto);
grid-auto-columns: 1fr;

grid Shorthand (Full)

/* grid: rows / columns */
grid: 80px 1fr / repeat(3, 1fr);

/* grid: auto-flow settings */
grid: auto-flow dense 200px / 1fr;  /* auto rows of 200px */
grid: repeat(3, 1fr) / auto-flow;   /* auto columns */

Alignment — Container Level

/* Aligns items within their cells */
justify-items: start | end | center | stretch;  /* inline/column axis */
align-items:   start | end | center | stretch;  /* block/row axis */
place-items: center;               /* shorthand: align-items justify-items */

/* Aligns the grid tracks within the container (when grid < 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;
place-content: space-between center; /* shorthand: align-content justify-content */

Alignment — Item Level

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

Subgrid

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.card {
  grid-column: span 2;
  display: grid;
  grid-template-columns: subgrid; /* inherits parent column tracks */
  grid-template-rows: subgrid;    /* inherits parent row tracks */
}

Masonry Layout (experimental)

.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry; /* Chrome/Edge flag, Firefox: -moz- */
}

Common Grid Patterns

Holy Grail Layout

.page {
  display: grid;
  grid-template:
    "header"  auto
    "main"    1fr
    "footer"  auto
    / 1fr;
  min-height: 100vh;
}
@media (min-width: 768px) {
  .page {
    grid-template:
      "header  header  header"  auto
      "sidebar main    aside"   1fr
      "footer  footer  footer"  auto
      / 200px  1fr     160px;
  }
}

Responsive Card Grid

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

Centered Container with Side Margins

.layout {
  display: grid;
  grid-template-columns:
    [full-start] minmax(1rem, 1fr)
    [content-start] min(65ch, 100%) [content-end]
    minmax(1rem, 1fr) [full-end];
}
.full-bleed { grid-column: full-start / full-end; }
.content    { grid-column: content-start / content-end; }

12-Column Grid

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

Named Repeat

grid-template-columns: repeat(4, [col-start] 1fr [col-end]);
/* creates col-start 1..4 and col-end 1..4 */
.span-two { grid-column: col-start 2 / col-end 3; }

CSS Grid Inspector Tips

  • Browsers show line numbers on hover in DevTools grid overlay.
  • Named areas show text labels in the overlay.
  • dense packing fills gaps but changes visual order (check accessibility).