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; }