Interactive Lesson: CSS Grid Layout

This lesson is focused on practice.

You already learned the basic CSS Grid properties. Now you will change them directly and watch how the grid items move.

What you will practice

grid-template-columns changes the column structure.
grid-template-rows changes explicit row heights.
gap adds space between grid cells.
grid-column can make an item span across columns.
Auto-placement puts items into the next available grid cell.

Try the interactive playground

Use the controls to change the grid. Watch the preview and the CSS code update together.

CSS Grid playground

Change the grid structure and watch auto-placement fill the next available cells.

grid-template-columns

grid-template-rows

gap

0px - 40px

Items

3 - 8

First and last item

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  background-color: #f1f5f9;
}

.grid-item:first-child,
.grid-item:last-child {
  grid-column: 1 / -1;
}