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.

Next lesson: Challenge - Advanced capstone

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies