Website Design CSS Layout and Grid Systems

Question 1

What CSS property is used to create a flexbox container?

Accepted Answer

display: flex

Answer

Setting `display: flex` on a container enables the Flexbox layout model for its direct children.

Question 2

What does the CSS Grid `fr` unit represent?

Accepted Answer

A fraction of the available space in the grid container

Answer

The `fr` unit in CSS Grid represents a fraction of the available free space in the grid container after fixed sizes are allocated.

Question 3

What is the CSS Box Model?

Accepted Answer

The system describing how elements are sized via content, padding, border, and margin

Answer

The CSS Box Model describes how every HTML element is rendered as a box composed of content, padding, border, and margin.

Question 4

Which CSS property controls the order of flex items within a flex container?

Accepted Answer

order

Answer

The `order` property in CSS Flexbox controls the visual order of flex items without changing the HTML source order.

Question 5

What does `box-sizing: border-box` do in CSS?

Accepted Answer

Makes width and height include padding and border, not just the content area

Answer

With `border-box`, an element's specified width and height include padding and border, making layout calculations more predictable.

Website Design Practice Test