CSS Grid Layout Guide

The fundamental property that enables grid layout:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  grid-gap: 10px;
}

Defines the columns of the grid with a space-separated list of values:

Using fr units

.grid-columns-fr {
  grid-template-columns: 1fr 2fr 1fr;
  /* 1fr is one fraction of available space */
}

Using pixel values

.grid-columns-px {
  grid-template-columns: 100px 200px 100px;
}

Mixed units

.grid-columns-mixed {
  grid-template-columns: 1fr 200px 1fr;
}

Using repeat()

.grid-columns-repeat {
  grid-template-columns: repeat(4, 1fr);
  /* Same as: 1fr 1fr 1fr 1fr */
}

Using minmax()

.grid-columns-minmax {
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  /* Columns are at least 100px and grow equally */
}

Using auto-fill

.grid-columns-auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  /* Creates as many columns as fit with min 120px width */
}

Using auto-fit

.grid-columns-auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  /* Like auto-fill but collapses empty tracks */
}

Defines the rows of the grid:

Auto rows

.grid-rows-auto {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 80px;
  /* All rows are 80px tall */
}

Specified rows

.grid-rows-specified {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 60px 120px 60px;
  /* First row 60px, second 120px, third 60px */
}

Defines a grid template using named grid areas:

.grid-areas {
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "sidebar footer footer";
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 80px 200px 80px;
}

.grid-area-header {
  grid-area: header;
}

.grid-area-sidebar {
  grid-area: sidebar;
}

.grid-area-main {
  grid-area: main;
}

.grid-area-footer {
  grid-area: footer;
}

Sets the gaps (gutters) between rows and columns:

Default gap

.grid-gap-default {
  grid-gap: 10px; /* Equal row and column gaps */
  /* Modern syntax: gap: 10px; */
}

Larger gap

.grid-gap-large {
  grid-gap: 30px; 
  /* Modern syntax: gap: 30px; */
}

Different row and column gaps

.grid-gap-uneven {
  grid-row-gap: 30px;    /* Gap between rows */
  grid-column-gap: 10px; /* Gap between columns */
  
  /* Modern syntax: 
  row-gap: 30px;
  column-gap: 10px; */
}

Places a grid item at a specific position based on grid lines:

.grid-line-placement {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 80px);
}

.grid-item-a {
  grid-column: 1 / 3; /* Start at line 1, end at line 3 */
  grid-row: 1 / 2;
}

.grid-item-b {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}

.grid-item-c {
  grid-column: 1 / 2;
  grid-row: 2 / 4;
}

.grid-item-d {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.grid-item-e {
  grid-column: 2 / 4;
  grid-row: 3 / 4;
}

Specifies how many grid cells an item will span:

.span-col-2 {
  grid-column: span 2; /* Spans 2 columns */
}

.span-row-2 {
  grid-row: span 2; /* Spans 2 rows */
}

.span-both {
  grid-column: span 2; /* Spans 2 columns */
  grid-row: span 2; /* Spans 2 rows */
}

Gives an item a name to be referenced in grid-template-areas:

.item {
  grid-area: header; /* Name this grid item "header" */
}

/* Alternatively, grid-area is a shorthand for grid-row-start, grid-column-start, grid-row-end, grid-column-end: */
.item {
  grid-area: 1 / 1 / 2 / 3; /* row-start / column-start / row-end / column-end */
}

Controls how auto-placed items are inserted in the grid:

.grid-dense {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 80px;
  grid-auto-flow: dense; /* Fills in holes in the grid */
}

.wide {
  grid-column: span 2;
}

.tall {
  grid-row: span 2;
}

Controls alignment of items within their grid cells:

justify-items (horizontal alignment)

.grid-justify-items {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  justify-items: start; /* start | end | center | stretch */
}

.item-sized {
  width: 80px;
  height: 40px;
}

align-items (vertical alignment)

.grid-align-items {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  align-items: start; /* start | end | center | stretch */
}

place-items (shorthand for both)

.grid-place-items {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  place-items: center; /* align-items | justify-items */
}

Controls alignment of entire grid within the grid container:

justify-content (horizontal grid alignment)

.grid-justify-content {
  grid-template-columns: repeat(3, 100px); /* Fixed width columns */
  grid-auto-rows: 80px;
  justify-content: space-between; /* start | end | center | space-between | space-around | space-evenly */
}

align-content (vertical grid alignment)

.grid-align-content {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 60px); /* Fixed height rows */
  align-content: space-between; /* start | end | center | space-between | space-around | space-evenly */
  height: 300px; /* Container taller than grid */
}

place-content (shorthand for both)

.grid-place-content {
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 60px);
  place-content: center; /* align-content | justify-content */
  height: 300px;
}

Controls alignment of a specific grid item within its cell:

justify-self (horizontal self-alignment)

.justify-self-start {
  width: 80px;
  justify-self: start;
}

.justify-self-center {
  width: 80px;
  justify-self: center;
}

.justify-self-end {
  width: 80px;
  justify-self: end;
}

.justify-self-stretch {
  justify-self: stretch; /* Default */
}

align-self (vertical self-alignment)

.align-self-start {
  height: 40px;
  align-self: start;
}

.align-self-center {
  height: 40px;
  align-self: center;
}

.align-self-end {
  height: 40px;
  align-self: end;
}

.align-self-stretch {
  align-self: stretch; /* Default */
}

A 12-column grid system similar to Bootstrap:

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

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

A classic web layout with header, footer, main content, and two sidebars:

.grid-holy-grail {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav content sidebar"
    "footer footer footer";
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 400px;
  gap: 10px;
}

.hg-header { grid-area: header; }
.hg-nav { grid-area: nav; }
.hg-content { grid-area: content; }
.hg-sidebar { grid-area: sidebar; }
.hg-footer { grid-area: footer; }

/* Responsive layout */
@media (max-width: 768px) {
  .grid-holy-grail {
    grid-template-areas:
      "header"
      "nav"
      "content"
      "sidebar"
      "footer";
    grid-template-columns: 1fr;
  }
}

A grid that automatically adjusts based on screen size:

.grid-responsive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  /* Items will be at least 200px wide, then fill available space */
  /* Number of columns adjusts automatically based on container width */
}

Grid items can be grid containers themselves:

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

.grid-nested-item {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 80px);
  gap: 10px;
}