Challenge - Modern layout
Build a modern layout with subgrid and container queries.
Modern layout tools
Modern CSS gives three tools for component-level responsiveness. subgrid lets a nested container inherit columns and rows from its parent; alignment lines up automatically. With container-type: inline-size the container becomes queryable; @container (min-width: 30rem) changes declarations based on the container width.
aspect-ratio: 16/9 locks the ratio; object-fit: cover crops an image to fill the box. Four properties build a responsive card grid without a media query.
Exercise Complete the modern card grid
Complete the CSS below. Make .gallery a grid with three equal columns (each 1fr). Give .card an aspect-ratio: 4/3. In .card img add object-fit: cover, width: 100% and height: 100%.
Show example solution
/* grid container */
.gallery {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
/* card */
.card {
aspect-ratio: 4/3;
}
/* card image */
.card img {
object-fit: cover;
width: 100%;
height: 100%;
}Test yourself
-
Match each modern layout property
- subgrid
- Inherits the parent grid
- container-type
- Makes the container queryable
- aspect-ratio
- Locks the ratio
- object-fit: cover
- Crops image to fill
-
Write the subgrid value
.card { display: grid; grid-template-columns: ____; grid-column: span 1; }Show answer
.card { display: grid; grid-template-columns: subgrid; grid-column: span 1; } -
Which declaration is written first to set up a container query?
??? { } @container (min-width: 30rem) { .card { font-size: 1.25rem; } }- @container
- @media
- container-name
- container-type
Show answer
container-type — Correct. The container's container-type value comes first, then @container queries it.