Grid Demo

1. Three equal columns

Each column gets an equal share of the available space.

.equal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

2. Fixed columns

Each column keeps an exact fixed width in pixels.

.fixed-grid {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

3. Percentage columns

Each column takes a percentage of the container width.

.percent-grid {
  display: grid;
  grid-template-columns: 20% 40% 40%;
}

4. Fixed plus flexible

One column stays fixed while the other stretches to fill the rest.

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

5. repeat(...)

`repeat()` is a shorter way to write the same column pattern several times.

.repeat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

6. minmax(...)

Each column has a minimum size but can still grow when more space is available.

.minmax-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
}

7. gap

Gap creates spacing between grid cells.

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

8. Item spanning

One item can span across more than one column.

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

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

9. Dashboard layout

Grid works well when one featured block sits beside smaller supporting blocks.

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

.hero-card {
  grid-column: span 2;
  grid-row: span 2;
}

10. Different heights in one row

The row becomes as tall as the tallest item inside that row.

.row-height-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.tall-card {
  min-height: 220px;
}

11. Responsive grid layout

This grid changes from three columns to one column on smaller screens.

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

@media (max-width: 700px) {
  .responsive-grid-demo {
    grid-template-columns: 1fr;
  }
}

12. Playground