CSS Grid

What is CSS Grid?

CSS Grid is a powerful two-dimensional layout system that allows you to create complex layouts with both rows and columns simultaneously. Unlike Flexbox, which is one-dimensional (either row or column), Grid gives you precise control over both axes at once.

Grid is layout-first: you define the structure, then place items into it. This makes it perfect for page layouts, dashboards, and any design where you need precise control over both dimensions.

Basic Grid Structure

Create a grid by setting display: grid and defining columns and rows:

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

Fractional Units (fr)

The fr unit represents a fraction of available space. It's Grid's most powerful sizing tool:

Repeat Notation

Save typing with repeat():

/* Instead of: 1fr 1fr 1fr 1fr */
grid-template-columns: repeat(4, 1fr);

/* Can repeat patterns */
grid-template-columns: repeat(3, 100px 200px);

Auto-Fit and Auto-Fill (Responsive Grids)

Create responsive grids without media queries using auto-fit or auto-fill:

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
/* Cards are at least 250px, grow to fill space */
/* Reduces columns as screen shrinks */

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
/* Creates extra empty columns if space available */
/* Use auto-fit for most cases */

Grid Item Placement

Place items precisely using grid lines (which are numbered starting at 1):

/* By line numbers (start / end) */
.wide { grid-column: 1 / 3; }        /* From line 1 to 3 */
.tall { grid-row: 1 / 3; }           /* From line 1 to 3 */

/* Using span */
.span-two { grid-column: span 2; }   /* Span 2 columns */

/* Full width */
.full { grid-column: 1 / -1; }       /* First to last line */

Grid Template Areas

The most intuitive way to create complex layouts—name your areas and place them visually:

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

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

Gap (Gutters)

Control spacing between grid items:

gap: 20px;

row-gap: 20px;
column-gap: 8px;

Alignment in Grid

Grid has powerful alignment options for both the grid container and individual items:

justify-items: start | center | end | stretch;
align-items: start | center | end | stretch;
place-items: center;  /* shorthand */

.item {
  justify-self: center;  /* horizontal in cell */
  align-self: center;    /* vertical in cell */
  place-self: center;    /* shorthand */
}

Real-World Layouts

.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "sidebar header  header"
    "sidebar stats   stats"
    "sidebar chart1  chart2";
  gap: 20px;
  height: 100vh;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
/* Automatically creates as many columns as fit! */

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