Checkpoint: Layout That Holds Up · Modern CSS Mastery

Five questions on this section. Answer all of them, then see your score and why each answer is right or wrong.

A page is display: flex with a 16rem sidebar and a main with flex: 1. A wide data table inside main pushes the page into horizontal scrolling. What’s the targeted fix?

Add min-width: 0 to main and let the table scroll inside its own overflow-x: auto wrapper.
Add flex-shrink: 1 to main.
Set overflow: hidden on body.
Change flex: 1 to flex: auto on main.

A grid uses grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) with no gap in a 500px container. How many columns are there, and how wide?

Two columns of 200px and 100px of empty space.
Two columns of 250px.
Three columns of about 167px.
One column of 500px.

A speaker sign-up form has three fieldsets, each with label and input pairs. The labels should form one column of equal width across all fieldsets. The form is a two-column grid. What do you add to each fieldset?

display: grid; grid-template-columns: max-content 1fr;
display: contents;
display: grid; grid-column: span 2; grid-template-columns: subgrid;
width: 100%;

A session card sits in a 300px sidebar. Its layout switches with @container (width > 400px), and the sidebar is the size container. The browser window is 1400px wide. Which layout does the card get?

The narrow layout, because the query measures the 300px sidebar.
The wide layout, because the window is wider than 400px.
Neither; container queries need a container name to match.
It depends on the card’s own width.

What width does width: clamp(280px, 50%, 600px) produce inside a 400px-wide parent?

280px
200px
400px
600px

5 questions unanswered