CSS Grid

Build two-dimensional layouts with named areas and fluid tracks.

Beginner 16 min read Lesson 9 of 480 Challenge included

What you will be able to do

Create responsive grid tracks
Place items with and without media queries
Use named grid areas

Grid is two-dimensional. Use it for page layouts and card galleries when you need control over both rows and columns.

grid.cssCSS

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.page {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  grid-template-areas: "side main";
  gap: 32px;
}

.sidebar { grid-area: side; }
.content { grid-area: main; }

Live exampleAuto-fit gallery

Your turn

Responsive card grid

Medium

Create a grid that shows as many 240px-minimum columns as fit, with a 16px gap.

CSS · starter

.cards {
  /* your rules here */
}

Check your understanding before moving on.

Knowledge checkQuestion 1

What does minmax(220px, 1fr) do in a grid track?

Select an answer to continue

Study tools

Make it yours.

Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.

Sign in to save notes and flashcards.Both are private to your account and stay with your progress.

Finished reading?

Lock in what you just learned.

Mark this lesson complete to save your place and move one step closer to the certificate.

Next: Responsive design

Lesson 9 of 480 · 0% of course