CSS Responsive Design & Media Queries 3 — Questions and Answers
Question 1: Which value of the CSS 'display' property is commonly used for responsive two-dimensional layouts?
- grid (Correct answer)
- inline
- table-cell
- list-item
Correct answer: grid
CSS Grid handles rows and columns for two-dimensional responsive layouts.
Question 2: What does the 'fr' unit represent in CSS Grid?
- A fraction of available free space (Correct answer)
- Fixed rem
- Frame rate
- Forty pixels
Correct answer: A fraction of available free space
The fr unit distributes a fraction of the remaining free space in the grid.
Question 3: Which function creates responsive grid columns that wrap automatically without media queries?
- repeat(auto-fit, minmax(200px, 1fr)) (Correct answer)
- columns(auto)
- grid-flow(wrap)
- span(auto)
Correct answer: repeat(auto-fit, minmax(200px, 1fr))
auto-fit with minmax lets columns flow and resize without explicit breakpoints.
Question 4: What does the CSS 'clamp()' function let you do for responsive sizing?
- Set a value with a minimum, preferred, and maximum (Correct answer)
- Clip overflow content
- Lock element position
- Round pixel values
Correct answer: Set a value with a minimum, preferred, and maximum
clamp(min, preferred, max) produces a fluid value bounded by min and max.
Question 5: Which property enables fluid typography that scales with the viewport?
- font-size with vw units (Correct answer)
- font-weight: auto
- text-scale
- zoom
Correct answer: font-size with vw units
Using vw (or clamp with vw) makes font-size scale with viewport width.
Question 6: What is a 'breakpoint' in responsive design?
- A viewport width where the layout changes via media queries (Correct answer)
- A JavaScript error
- A grid gap
- A CSS comment marker
Correct answer: A viewport width where the layout changes via media queries
A breakpoint is a defined screen width at which styles adapt.
Question 7: Which CSS property prevents images from overflowing their container on small screens?
- max-width: 100% (Correct answer)
- min-width: 100%
- width: 9999px
- overflow: visible
Correct answer: max-width: 100%
Setting max-width: 100% keeps images within their parent's width.
CSS Responsive Design & Media Queries 3
Which value of the CSS 'display' property is commonly used for responsive two-dimensional layouts?