CSS (Layout & Images) 3 — Questions and Answers
Question 1: Which property defines the number and size of columns in a grid?
- grid-template-columns (Correct answer)
- grid-columns
- column-template
- grid-cols
Correct answer: grid-template-columns
grid-template-columns specifies the track sizes for grid columns.
Question 2: What does the 'fr' unit represent in CSS Grid?
- A fraction of the available space (Correct answer)
- A fixed rem value
- A frame rate
- A font ratio
Correct answer: A fraction of the available space
The fr unit represents a fraction of the free space in the grid container.
Question 3: Which property makes an image scale responsively to its container's width?
- max-width: 100% (Correct answer)
- width: auto
- image-fit: scale
- responsive: true
Correct answer: max-width: 100%
Setting max-width: 100% lets an image shrink to fit its container while not exceeding its natural size.
Question 4: What does 'flex-wrap: wrap' do?
- Allows flex items to flow onto multiple lines (Correct answer)
- Wraps text inside flex items
- Centers flex items vertically
- Prevents items from shrinking
Correct answer: Allows flex items to flow onto multiple lines
flex-wrap: wrap lets items move to new lines when they exceed the container width.
Question 5: Which value of 'object-fit' scales an image down to fit inside its box without cropping?
- contain (Correct answer)
- cover
- fill
- none
Correct answer: contain
object-fit: contain scales the image to fit entirely within the box, preserving aspect ratio.
Question 6: How do you center a block element horizontally within its parent?
- margin: 0 auto with a set width (Correct answer)
- text-align: center
- float: center
- position: center
Correct answer: margin: 0 auto with a set width
A block with a defined width and margin: 0 auto centers horizontally.
Question 7: Which CSS property controls the stacking order of overlapping elements?
- z-index (Correct answer)
- stack-order
- layer
- depth
Correct answer: z-index
z-index sets the stacking order of positioned elements.
CSS (Layout & Images) 3
Which property defines the number and size of columns in a grid?