CSS Layout

CSS Grid

Create powerful two-dimensional layouts with CSS Grid — rows, columns, areas, and alignment.

CSS Grid

CSS Grid Layout is a two-dimensional layout system that handles both columns and rows simultaneously. It is designed for full-page layouts and complex components.

Grid Container

Set display: grid to create a grid container. Use grid-template-columns and grid-template-rows to define the grid structure.

The fr Unit

The fr (fraction) unit represents a fraction of the available space in the grid container.

Grid Template Areas

Use grid-template-areas to name areas and place items visually in your CSS.

Auto-fill and Auto-fit

Use repeat(auto-fill, minmax(...)) to create responsive grids without media queries.

Example

css

/* Basic grid */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 24px;
}

/* Named areas */
.page-layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main  main  "
    "footer footer footer";
  grid-template-columns: 260px 1fr;
  grid-template-rows: 64px 1fr 80px;
  min-height: 100vh;
  gap: 0;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

/* Responsive grid without media queries */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

/* Spanning columns */
.featured {
  grid-column: span 2;
  grid-row: span 2;
}

/* Alignment */
.grid {
  justify-items: stretch;  /* horizontal */
  align-items: center;     /* vertical */
  place-items: center;     /* both */
}

Try it yourself — CSS