CSS Grid Layout for Beginners

Learn CSS Grid with practical examples. Create two-dimensional layouts with grid-template-columns, gap, minmax and repeat.

Make a grid container

CSS Grid arranges items in rows and columns. Add display: grid to the parent, then define the columns you need.

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

Create responsive columns

For cards that fit the available width, combine repeat(), auto-fit and minmax(). The browser fits as many columns as it can while keeping each at least 15rem wide.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

Place items across tracks

Use line numbers or named areas when an item needs to span multiple columns. Start with the simple responsive pattern above for card collections.

.feature-card {
  grid-column: span 2;
}