Test what you learned.

8 questions on CSS Layout. Pass 70% to clear the chapter.

← Review chapter lessons

Quiz

CSS Layout — Chapter Quiz

Eight questions on flex, grid, position, responsive.

0/ 8

Question 1
1
To lay out three items in a row with equal spacing between them, the fastest tool is…
AfloatBdisplay: flex with gapCdisplay: inline-block with marginsDposition: absolute for each item
Flex with gap is the right tool for one-dimensional layouts. No floats, no inline-block hacks, no absolute positioning.
Question 2
2
Grid is for two-dimensional layouts; flex is for one-dimensional.
TTrueFFalse
Grid declares rows AND columns. Flex flows in one direction and wraps. Use whichever matches the problem.
Question 3
3
Which position keeps an element pinned to the viewport during scroll?
ArelativeBabsoluteCfixedDsticky
fixed is pinned to the viewport. sticky is positioned in flow until it reaches a threshold (e.g., top: 0), then it stays put.
Question 4
4
What does grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) do?
ACreates exactly 3 columnsBAs many columns as fit, each at least 200px, growing to fillCSets the column gap to 200pxDReserves space for 200 columns
auto-fit + minmax(200px, 1fr) is the responsive-by-default column pattern. No media queries needed.
Question 5
5
Vertically center a flex item with…
Ajustify-content: centerBalign-items: centerCtext-align: centerDvertical-align: middle
For a flex-direction: row container, align-items: center centers along the cross (vertical) axis. justify-content handles the main (horizontal) axis.
Question 6
6
On a mobile-first stylesheet, what does this apply at 1024px wide?
```
.layout { display: block; }

@media (min-width: 768px) {
  .layout {
    display: grid;
    grid-template-columns: 250px 1fr;
  }
}
```
Adisplay: blockBdisplay: grid with two columnsCBoth — but block winsDNothing applies
At 1024px, the media query matches, so its rule wins (same specificity, later in source).
Question 7
7
container-queries lets a component respond to its OWN size, not the viewport's.
TTrueFFalse
Set container-type: inline-size on the parent, then write @container (min-width: …) rules. The same component can look different in a sidebar vs full-width.
Question 8
8
To create a stacking context that contains its descendants' z-index values, use isolation: _________.
isolation: isolate creates a stacking context without any other side effects — clean way to keep a component's z-indexes self-contained.