CSS Grid Layout: Tracks, Placement, and Alignment

Auto audio on: the next questions will be read aloud when you click Continue.

1. 1

   Which declaration turns an element into a block-level grid container?

   A display: block; B display: grid; C display: flex;
2. 2

   Which declaration creates three equal-width grid columns?

   A grid-template-columns: repeat(3, 1fr); B grid-template-columns: 3fr; C grid-template-columns: repeat(1fr, 3);
3. 3

   Which CSS property adds consistent spacing between both grid rows and grid columns?

   A padding B border-spacing C gap
4. 4

   In the illustrated grid, what are the three vertical track regions called?

   

   A Grid rows B Grid columns C Grid gaps
5. 5

   A grid item uses grid-column: 1 / 3. How many columns does it span in the illustrated four-line grid?

   

   A Two columns B Three columns C One column
6. 6

   In grid-template-columns: 240px 1fr 2fr, how is the remaining available width divided after the fixed track is accounted for?

   A The second and third tracks receive equal widths B The second track receives twice the width of the third C The third track receives twice the width of the second
7. 7

   Which track definition creates a column that should not shrink below 200px but can expand to share available space?

   

   A minmax(1fr, 200px) B minmax(200px, 1fr) C max(200px, 1fr)
8. 8

   When used with repeat() for a responsive grid, how does auto-fit differ from auto-fill when there are fewer items than available tracks?

   A auto-fit collapses empty repeated tracks so occupied tracks can expand B auto-fit always creates one more visible empty track than auto-fill C auto-fit changes the grid from rows to columns
9. 9

   The highlighted item starts at vertical grid line 2 and ends at line 4. Which declaration produces this placement?

   

   A grid-column: 2 / span 4; B grid-row: 2 / 4; C grid-column: 2 / 4;
10. 10

    What does a period represent inside a grid-template-areas string?

    

    A An automatically named grid line B An empty or unnamed grid cell C A cell that repeats the preceding area
11. 11

    Which property aligns all grid items within their own grid areas along the block axis?

    A align-items B align-content C justify-content
12. 12

    In the default horizontal writing mode, which property aligns grid items within their cells from left to right along the inline axis?

    A align-items B place-content C justify-items
13. 13

    Two grid items overlap as illustrated. Which property most directly controls which item is painted on top?

    

    A overflow B z-index C grid-auto-flow
14. 14

    A grid explicitly defines two columns, but an item is placed using grid-column: 4. What can CSS Grid create to accommodate it?

    A An implicit grid column B A second grid container C A flex line
15. 15

    Which declaration enables auto-placement to backfill earlier holes with later items that fit?

    

    A grid-auto-flow: row; B grid-template-flow: compact; C grid-auto-flow: dense;
16. 16

    What is the defining behavior of subgrid when applied to a nested grid's columns?

    

    A It converts the nested grid into a flex container B It adopts the relevant parent grid tracks instead of defining independent ones C It merges all nested items into a single parent item
17. 17

    Why should developers avoid relying on CSS Grid placement to create a visual order that differs greatly from the HTML source order?

    A Assistive technologies and keyboard navigation may still follow the source order B Reordered grid items can no longer receive CSS styles C Visual reordering automatically removes semantic HTML elements