CSS (Layout & Images) 2 — Questions and Answers
Question 1: Which CSS property creates a grid container?
- display: grid (Correct answer)
- display: table
- position: grid
- layout: grid
Correct answer: display: grid
Setting display: grid on an element turns it into a grid container.
Question 2: What does the 'object-fit: cover' value do to an image?
- Scales it to fill the box while keeping aspect ratio, cropping overflow (Correct answer)
- Stretches it to fill the box ignoring aspect ratio
- Shrinks it to fit entirely inside the box
- Tiles it across the box
Correct answer: Scales it to fill the box while keeping aspect ratio, cropping overflow
object-fit: cover fills the content box while preserving aspect ratio, cropping any excess.
Question 3: Which property sets the spacing between flex items?
- gap (Correct answer)
- spacing
- margin-flex
- flex-space
Correct answer: gap
The gap property defines spacing between flex (and grid) items.
Question 4: What value of 'position' removes an element from normal flow and positions it relative to the nearest positioned ancestor?
- absolute (Correct answer)
- relative
- static
- sticky
Correct answer: absolute
position: absolute removes the element from flow and anchors it to the nearest positioned ancestor.
Question 5: Which CSS function lets you define a responsive image size that scales between a minimum and maximum?
- clamp() (Correct answer)
- scale()
- minmax()
- calc()
Correct answer: clamp()
clamp() sets a value between a defined minimum and maximum based on a preferred value.
Question 6: How do you make a background image cover the entire element without repeating?
- background-size: cover; background-repeat: no-repeat; (Correct answer)
- background-fit: full;
- background-repeat: cover;
- background-position: stretch;
Correct answer: background-size: cover; background-repeat: no-repeat;
background-size: cover scales the image to cover the element and no-repeat prevents tiling.
Question 7: In flexbox, which property aligns items along the main axis?
- justify-content (Correct answer)
- align-items
- align-content
- flex-align
Correct answer: justify-content
justify-content distributes items along the flex container's main axis.
CSS (Layout & Images) 2
Which CSS property creates a grid container?