Summary - Modern card grid

Build a card grid with modern layout properties.

A modern card grid

In this group you learned four modern layout tools: subgrid aligned inner grids to the parent; @container changed styles by container width; aspect-ratio set fixed-ratio placeholders; object-fit fit images into frames.

Now you will combine all four into a single card grid. Cards will be marked as containers, hold fixed-ratio images, and keep content alignment with subgrid.

Exercise Build the card grid

Give the .cards selector four declarations: display: grid, grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)), gap: 1.5rem, and container-type: inline-size. The card grid becomes both responsive and open to container queries.

Show example solution

/* card grid: responsive and open to container queries */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  container-type: inline-size;
}

Exercise Align the card content with subgrid

Give the .card selector two declarations: display: grid and grid-template-columns: subgrid. The card content will align to the parent grid's column lines.

Show example solution

/* card content aligns to the parent grid */
.card {
  display: grid;
  grid-template-columns: subgrid;
}

Test yourself

Which property opens a container for queries?
- display: container
- container-name: main
- container-type: inline-size
- position: container
Show answer

container-type: inline-size — Correct. container-type: inline-size opens the container's width to queries.

Add object-fit to the card image

.card img {
  ____: cover;
  width: 100%;
  aspect-ratio: 4 / 3;
}

Show answer

.card img {
  object-fit: cover;
  width: 100%;
  aspect-ratio: 4 / 3;
}

Next lesson: Writing-mode

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies