Website Design CSS Layout and Grid Systems 2

Question 1

What CSS Grid property is used to define the number and size of columns?

Accepted Answer

grid-template-columns

Answer

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?

Accepted Answer

Centers flex items along the main axis of the container

Answer

`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?

Accepted Answer

Absolute positions relative to the nearest positioned ancestor; relative shifts from its normal position

Answer

`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'?

Accepted Answer

A specific screen width at which styles change for responsive design

Answer

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?

Accepted Answer

Stretches flex items to fill the container's cross-axis height

Answer

`align-items: stretch` is the default Flexbox behavior that makes flex items fill the full height (cross axis) of the container.

Website Design Practice Test

Website Design Practice Test

Website Design CSS Layout and Grid Systems 2