Website Design CSS Layout and Grid Systems 2 — Questions and Answers
Question 1: What CSS Grid property is used to define the number and size of columns?
- grid-columns
- grid-template-columns (Correct answer)
- grid-column-layout
- columns
Correct answer: grid-template-columns
The `grid-template-columns` property defines the columns of a CSS Grid layout, specifying the number and width of each column.
Question 2: What does `justify-content: center` do in Flexbox?
- Centers text within flex items
- Centers flex items along the main axis of the container (Correct answer)
- Applies center alignment to the cross axis
- Centers the flex container itself on the page
Correct answer: Centers flex items along the main axis of the container
`justify-content: center` centers flex items along the main axis (horizontal by default) within a flex container.
Question 3: What is the difference between `position: absolute` and `position: relative` in CSS?
- Absolute uses percentages; relative uses pixels
- Absolute positions relative to the nearest positioned ancestor; relative shifts from its normal position (Correct answer)
- Absolute removes the element from the page; relative hides it
- They are interchangeable in modern CSS
Correct answer: Absolute positions relative to the nearest positioned ancestor; relative shifts from its normal position
`position: absolute` places an element relative to its nearest positioned ancestor, while `position: relative` shifts it from its normal document flow position.
Question 4: What is a CSS 'breakpoint'?
- A CSS error that halts rendering
- A specific screen width at which styles change for responsive design (Correct answer)
- A CSS animation pause point
- The maximum width of a CSS container
Correct answer: A specific screen width at which styles change for responsive design
A breakpoint is a screen-width threshold in a media query where the layout or styles change to accommodate different device sizes.
Question 5: What does `align-items: stretch` do in a Flexbox container?
- Stretches the container to fill the viewport
- Stretches flex items to fill the container's cross-axis height (Correct answer)
- Distributes items with equal spacing
- Aligns items to the baseline of the text
Correct answer: Stretches flex items to fill the container's cross-axis height
`align-items: stretch` is the default Flexbox behavior that makes flex items fill the full height (cross axis) of the container.
Question 6: What does `z-index` control in CSS positioning?
- The zoom level of an element
- The stacking order of positioned elements on the z-axis (depth) (Correct answer)
- The opacity level of layered elements
- The order of elements in the DOM
Correct answer: The stacking order of positioned elements on the z-axis (depth)
`z-index` controls the stacking order of positioned elements along the z-axis; higher values appear in front of lower values.
Website Design CSS Layout and Grid Systems 2
What CSS Grid property is used to define the number and size of columns?