CSS Grid Cheat Sheet

Basic Structure

<div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

Container Properties

grid-template-columns / rows

.grid {
  /* Fixed width */
  grid-template-columns: 100px 200px 100px;

  /* Ratios (fr unit) */
  grid-template-columns: 1fr 2fr 1fr;

  /* Mixed */
  grid-template-columns: 250px 1fr 1fr;

  /* repeat */
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(4, 100px);

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

  /* Rows */
  grid-template-rows: 100px auto 100px;
}

gap (Spacing)

.grid {
  gap: 20px;           /* Row and column */
  row-gap: 20px;       /* Row only */
  column-gap: 10px;    /* Column only */
  gap: 20px 10px;      /* row column */
}

grid-template-areas (Named Areas)

.grid {
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 250px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
}

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

justify-items / align-items

.grid {
  /* Horizontal alignment within cells */
  justify-items: start;   /* Left-aligned */
  justify-items: end;     /* Right-aligned */
  justify-items: center;  /* Center */
  justify-items: stretch; /* Stretch to fill (default) */

  /* Vertical alignment within cells */
  align-items: start;
  align-items: end;
  align-items: center;
  align-items: stretch;

  /* Shorthand for both */
  place-items: center;
  place-items: center start;  /* align justify */
}

justify-content / align-content

.grid {
  /* Horizontal alignment of entire grid */
  justify-content: start;
  justify-content: end;
  justify-content: center;
  justify-content: space-between;
  justify-content: space-around;
  justify-content: space-evenly;

  /* Vertical alignment of entire grid */
  align-content: start;
  align-content: end;
  align-content: center;

  /* Shorthand for both */
  place-content: center;
}

grid-auto-flow

.grid {
  grid-auto-flow: row;       /* Place in row direction (default) */
  grid-auto-flow: column;    /* Place in column direction */
  grid-auto-flow: row dense; /* Fill in gaps */
}

grid-auto-rows / columns

.grid {
  grid-auto-rows: 200px;        /* Height of implicit rows */
  grid-auto-rows: minmax(100px, auto);
  grid-auto-columns: 1fr;       /* Width of implicit columns */
}

Item Properties

grid-column / grid-row

.item {
  /* Start / end position */
  grid-column: 1 / 3;      /* From column 1 to column 3 (spans 2 columns) */
  grid-row: 1 / 2;

  /* Using span */
  grid-column: 1 / span 2; /* From column 1, span 2 columns */
  grid-column: span 2;     /* Span 2 columns (auto-placed) */

  /* Individual properties */
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

grid-area

.item {
  /* Named area */
  grid-area: header;

  /* row-start / column-start / row-end / column-end */
  grid-area: 1 / 1 / 2 / 3;
}

justify-self / align-self

.item {
  justify-self: start;   /* Individual horizontal alignment */
  justify-self: end;
  justify-self: center;
  justify-self: stretch;

  align-self: start;     /* Individual vertical alignment */
  align-self: end;
  align-self: center;
  align-self: stretch;

  /* Shorthand for both */
  place-self: center;
}

Common Patterns

Basic Grid

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

Responsive Grid

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

Holy Grail Layout

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav main aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

Dashboard

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 200px);
  gap: 20px;
}

.widget-large {
  grid-column: span 2;
  grid-row: span 2;
}

.widget-wide {
  grid-column: span 2;
}

Gallery

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 200px;
  gap: 10px;
}

.gallery-item.featured {
  grid-column: span 2;
  grid-row: span 2;
}

12-Column System

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; }

Card List

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

Centering

.container {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

auto-fill vs auto-fit

/* auto-fill: Creates empty tracks as well */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

/* auto-fit: Collapses empty tracks to 0 */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Related Articles

• CSS Flexbox Cheat Sheet - Flexbox
• Tailwind Cheat Sheet - Utility CSS
• Responsive Design - Practice