Website Layout Principles

Test your layout knowledge

Six questions covering real decisions: grid systems, box model behaviour, responsive breakpoints, and stacking context. Pick an answer, check it, and see why it matters.

Website layout structure diagram showing grid and spacing principles

Self-assessment

Six questions on structure

Each question reflects a real scenario — the kind of problem that appears when building or reviewing an actual page layout. Check answers one at a time.

Progress 0 / 6

6 questions total

Instant feedback per answer

Explanation shown after each check

Question 1 of 6

A flex container has flex-direction: row and align-items: center. Along which axis does align-items operate?

Cross axis. When flex-direction is row, the main axis runs left to right. align-items always targets the perpendicular (cross) axis — in this case, vertical. justify-content handles main-axis distribution.

Question 2 of 6

Which CSS property controls the space between a grid container's tracks, not between items within a track?

column-gap / row-gap (and the shorthand gap) are the current specification. grid-gap was the original name and still works as an alias, but the spec replaced it. Both set gutter space between tracks, not within them.

Question 3 of 6

An element has position: absolute. What establishes its containing block?

Nearest positioned ancestor. Any ancestor with position set to relative, absolute, fixed, or sticky creates the containing block. If none exists, it falls back to the initial containing block (viewport).

Question 4 of 6

Using box-sizing: border-box, you set an element to width: 300px, padding: 20px, and border: 5px solid. What is the content area width?

250px. With border-box, the declared width (300px) includes padding and border. Total horizontal padding: 20×2 = 40px. Total horizontal border: 5×2 = 10px. Content width = 300 − 40 − 10 = 250px.

Question 5 of 6

Which value of display causes an element to generate a new block formatting context without using overflow: hidden?

flow-root was specifically introduced to create a BFC cleanly. Unlike overflow: hidden, it has no side effects on clipping. inline-block also creates a BFC but changes the outer display type, making it unsuitable for block-level containers.

Question 6 of 6

A layout uses grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)). What happens when the container is 450px wide?

Two columns of 225px each. At 450px, two tracks of 200px minimum fit without overflow. The 1fr maximum then distributes the remaining space equally — each column stretches to 225px. A third column would require at least 600px.

0/6

Questions answered correctly