CSS CSS Professional Development 3 — Questions and Answers
Question 1: Which CSS layout module is best suited for two-dimensional row and column layouts?
- CSS Grid (Correct answer)
- Flexbox
- Floats
- Inline-block
Correct answer: CSS Grid
CSS Grid handles both rows and columns, making it ideal for 2D layouts.
Question 2: What does the `gap` property control in a flex or grid container?
- Spacing between items (Correct answer)
- Item background color
- Border thickness
- Z-index stacking
Correct answer: Spacing between items
`gap` sets the spacing between rows and columns of grid or flex items.
Question 3: Which value of `position` keeps an element fixed relative to the viewport while scrolling?
- fixed (Correct answer)
- relative
- static
- absolute
Correct answer: fixed
`position: fixed` anchors an element to the viewport regardless of scrolling.
Question 4: What does `position: sticky` do?
- Toggles between relative and fixed based on scroll position (Correct answer)
- Always stays at the top
- Removes the element from flow permanently
- Centers the element
Correct answer: Toggles between relative and fixed based on scroll position
A sticky element behaves relatively until a scroll threshold, then becomes fixed.
Question 5: Which CSS function lets you clamp a value between a minimum and maximum for fluid sizing?
- clamp() (Correct answer)
- calc()
- min()
- scale()
Correct answer: clamp()
`clamp(min, preferred, max)` constrains a value within a range for responsive sizing.
Question 6: In Flexbox, which property aligns items along the main axis?
- justify-content (Correct answer)
- align-items
- align-content
- order
Correct answer: justify-content
`justify-content` distributes items along the flex container's main axis.
Question 7: What does `aspect-ratio: 16 / 9` enforce on an element?
- A consistent width-to-height proportion (Correct answer)
- A fixed pixel width
- A maximum font size
- A grid template
Correct answer: A consistent width-to-height proportion
`aspect-ratio` maintains a proportional relationship between width and height.
CSS CSS Professional Development 3
Which CSS layout module is best suited for two-dimensional row and column layouts?