Chapter quiz · Layout

Test what you learned.

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

← Review chapter lessons

Quiz

Tailwind Layout — Chapter Quiz

Eight questions on display, flex, grid, spacing, sizing, position, and container queries.

0/ 9

Question 1
1
Which utility makes an element a flex container?
Adisplay-flexBflexCflexboxDd-flex
flex sets display: flex. inline-flex is the inline variant.
Question 2
2
Which pair centers flex children on both axes?
Aitems-center justify-centerBtext-center align-middleCplace-self-centerDcontent-center self-center
items-center handles the cross axis, justify-center the main axis.
Question 3
3
What does grid-cols-3 do?
ACreates 3 grid rowsBCreates 3 equal-width grid columnsCAdds a gap of 3DSpans an item across 3 columns
grid-cols-3 defines three columns; col-span-3 is for spanning an item.
Question 4
4
gap-6 controls the space between grid and flex items.
TTrueFFalse
gap-* sets the gutter between tracks in both grid and flex.
Question 5
5
Which utility pins an element to a fixed position relative to the viewport?
AabsoluteBfixedCstickyDstatic
fixed positions relative to the viewport; sticky toggles between relative and fixed at a scroll threshold.
Question 6
6
The container query variant that styles based on the nearest @container ancestor width starting at the small size is @___:.
Container query variants like @sm: and @lg: respond to the labeled container, not the viewport.
Question 7
7
Which utility keeps a 16:9 box ratio?
Aratio-16-9Baspect-videoCbox-16/9Dsize-video
aspect-video is 16:9; aspect-square is 1:1, and aspect-[4/3] is arbitrary.
Question 8
8
Which utilities affect how overflowing content is handled?
Select all that apply.
Aoverflow-hiddenBoverflow-autoCtruncateDz-10
Overflow and truncate deal with clipping/scroll; z-10 is stacking order, unrelated to overflow.