Advanced CSS · 8 questionsAdvanced CSS quizAnswer every question, then score the quiz. The result is saved in this browser.1. What does grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) do?Always creates 160px columnsFits as many columns of at least 160px as possible and stretches them to fill the rowCreates exactly one column per itemCreates fixed 1fr columns and ignores 160px2. Which layout tool is designed for two-dimensional placement in rows AND columns?FlexboxGridfloatinline-block3. .card { --pad: 24px } .card.compact { --pad: 12px } .card p { padding: var(--pad) }. What padding does p get inside .card.compact?24px12px0var(--pad) is invalid inside p4. What does color: var(--brand, hotpink) do if --brand is not defined?Uses blackUses hotpinkThrows a CSS errorUses inherit5. Which pair of properties can usually be animated without triggering layout or paint?width and heighttop and lefttransform and opacitymargin and padding6. What is the difference between a transition and a keyframe animation?Transitions can loop forever, keyframes cannotA transition animates between two states when a property changes; keyframes define a timeline that can run on its ownThey are identicalKeyframes only work on colors7. A card should switch to a horizontal layout when ITS slot is at least 400px wide. What do you use?@media (min-width: 400px)container-type: inline-size on the slot + @container (min-width: 400px)flex-wrap: wrap100dvw8. What does font-size: clamp(1.5rem, 1rem + 3vw, 3.5rem) do?Picks a random sizeScales with the viewport but never below 1.5rem or above 3.5remAlways 3vwOnly works in GridScore my quizResponsive Design and Container QueriesNext track: Advanced JavaScript
