Website Design CSS Layout and Grid Systems

Question 1

What CSS property is used to create a flexbox container?

Accepted Answer

display: flex

Answer

display: block

Answer

display: grid

Answer

display: inline

Question 2

What does the CSS Grid `fr` unit represent?

Accepted Answer

A fraction of the available space in the grid container

Answer

Fixed-width fractions

Answer

Font ratio for grid items

Answer

Frame rate for grid animations

Question 3

What is the CSS Box Model?

Accepted Answer

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

Answer

A 3D CSS animation framework

Answer

A CSS grid layout specification

Answer

A standard for responsive breakpoints

Question 4

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

Accepted Answer

order

Answer

flex-direction

Answer

flex-order

Answer

z-index

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

Adds a border around all box elements

Answer

Sets the box model to use margins in size calculations

Answer

Resets all box model properties to default

Question 6

What is a CSS 'media query' used for?

Accepted Answer

Applying styles conditionally based on device features like screen width

Answer

Querying a media database

Answer

Loading audio and video files in CSS

Answer

Selecting elements based on media type in HTML