CSS Advanced Test

Challenge your knowledge of Grid, Flexbox, custom properties, responsive design and motion preferences.

6 questions. Choose the best answer for each question, then review every explanation.

Question 1 of 6

1 of 6

Question 1What does this Grid declaration create?

grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));

Responsive columns that are at least 16rem wideExactly 16 fixed columnsOne column that is always 1rem wideRows that expand only vertically

Question 2What does flex: 1 1 0% allow an item to do?

Remain at its intrinsic widthLeave the flex formatting contextGrow and shrink from a zero flex basisGrow but never shrink

Question 3How is a custom property referenced?

--accent: #f59e0b;

color: var(--accent);color: custom(--accent);color: $accent;color: @accent;

Question 4Which media feature detects a user preference for less animation?

motion-safe-onlyanimation-preferenceprefers-reduced-motionreduced-animation

Question 5What does aspect-ratio: 16 / 9 provide?

A fixed width of 16pxA nine-column gridA transform scaleA preferred width-to-height ratio

Question 6What does clamp(1rem, 2vw, 2rem) return?

A browser-dependent random valueA preferred value bounded by a minimum and maximumThe sum of all three valuesOnly the middle value