Test your understanding of responsive web layout techniques with this quiz on Flexbox, CSS Grid, and media queries. Evaluate your knowledge of fluid units, alignment, gap usage, and common patterns for building modern, adaptable designs.
Which property sets the main axis direction for flex items when using Flexbox?
Explanation: The flex-direction property determines whether flex items are arranged as a row or a column. Justify-content and align-items control alignment, not direction. Grid-auto-flow is related to CSS Grid, not Flexbox.
When designing a fully responsive component, which unit type ensures width adjusts with the viewport size?
Explanation: The vw unit represents a percentage of the viewport's width, making it ideal for fluid layouts. Pixels (px), points (pt), and centimeters (cm) are fixed or print-related units and do not respond to viewport changes.
Which CSS Grid value allows a column to take up remaining space after other columns are sized?
Explanation: The fr unit distributes available space among grid tracks based on their ratio. The em unit is relative to font size, min-content is a sizing keyword, and px is a fixed sizing unit.
To center a flex item both horizontally and vertically in a container, which pair of Flexbox properties is most commonly used?
Explanation: The combination of justify-content and align-items centers items along the main and cross axes. Display and flex-wrap set display and wrapping behavior. Grid-template and gap are Grid properties. Width and float do not provide accurate centering in Flexbox.
What is the correct syntax for applying styles only when the viewport is at least 600px wide?
Explanation: The correct syntax uses @media with (min-width: 600px) in parentheses. The other options use incorrect formatting, keywords, or use max-width which targets viewports smaller than 600px.
Which CSS property can add space between items in both Flexbox and Grid layouts?
Explanation: The gap property is designed to add spacing directly between items for both Flexbox and Grid layouts. Margin-top only affects vertical margins, border adds a line not spacing, and row-span is not a valid CSS property.
Which layout pattern often uses media queries to switch from a column layout on mobile devices to a row layout on larger screens?
Explanation: Stack to Row is a common responsive pattern where content stacks vertically on small screens and shifts to a horizontal row on larger screens. Float Grid and Centered Grid aren't standard pattern names, and Sticky Header refers to header positioning, not overall layout.
To align all grid items along the horizontal axis within their cells, which CSS Grid property should you use?
Explanation: justify-items in a grid layout aligns content horizontally within each cell. Align-content controls spacing between grid tracks, flex-shrink is a Flexbox property, and float is outdated and unsuitable for grid alignment.
To allow a flex item to grow and fill unused space in a flex container, which property should you set?
Explanation: flex-grow tells a flex item to expand and share unused space. Align-self changes alignment for a single item, margin-left adds spacing only, and order repositions items but doesn’t affect size.
Which value in the grid-template-columns property creates as many columns as fit based on available space?
Explanation: repeat(auto-fit, minmax(200px, 1fr)) automatically fits as many columns as possible in the container. Span 2 applies to grid item placement, none is not valid for grid-template-columns, and center is a value for alignment, not column creation.
Which scenario best illustrates when to use a media query?
Explanation: Altering styles based on screen size is the core purpose of media queries. The other options pertain to styles that do not require conditional responsiveness or device-based changes.
To place a grid item in the second row and third column, which properties can you use?
Explanation: grid-row and grid-column specify the position of a grid item within grid rows and columns. Margin and padding control spacing, border adds a line, and float/clear are for older layout methods not compatible with Grid placement.
Which Flexbox property lets items wrap onto multiple lines when they exceed the container width?
Explanation: flex-wrap enables flex items to move onto additional lines as needed, maintaining responsiveness. Overflow manages content outside the box, align-items controls alignment, and position handles layout but not wrapping.
Why is min-width often preferred over max-width in mobile-first responsive design?
Explanation: Using min-width allows you to apply styles for progressively larger screens, which aligns with a mobile-first approach. Max-width targets smaller viewports instead. Max-width is a valid media query but less preferred for mobile-first. Min-width in this context does not simply set container width.
Which property controls the initial main size of a flex item before remaining space is distributed?
Explanation: flex-basis determines the starting size of a flex item before growing or shrinking. Flex-order is incorrect, gap is for spacing, and place-items is used for grid alignment.
Which layout would benefit most from using CSS Grid rather than Flexbox?
Explanation: CSS Grid excels at structuring layouts with both rows and columns, such as a card gallery. Flexbox is ideal for single-direction layouts like navigation bars or vertical stacks. Centering a single button doesn't require the complexity of Grid.