Junior Web Developer: CSS Layout and Responsive Design

The CSS Layout and Responsive Design domain tests the box model, the cascade, Flexbox and Grid, positioning, and how layouts adapt across viewport sizes.

Foundations

• box-sizing: border-box makes width include padding and border; most resets apply it globally.
• Adjacent vertical margins collapse to the larger value. Margins do not collapse inside Flex or Grid containers, or across a border or padding.
• Specificity ranks inline styles, then IDs, then classes/attributes/pseudo-classes, then elements/pseudo-elements. Later source order wins ties; @layer and !important change the outcome.

Flexbox vs Grid

Flexbox distributes items along one axis. flex: 1 is shorthand for 1 1 0%, so items share space from a zero basis; flex: auto is 1 1 auto and starts from content size. Flex items default to min-width: auto, which blocks shrinking below content size - set min-width: 0 to allow text-overflow: ellipsis. Grid works in two dimensions; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) builds a responsive card wall with no media query. auto-fit collapses empty tracks, auto-fill keeps them.

Positioning

absolute resolves against the nearest ancestor whose position is not static. sticky needs an offset such as top: 0 and a scrolling ancestor that is not overflow: hidden.

Worked example

display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); - columns never fall below 240px, leftover space is shared evenly by 1fr, and gap replaces margin arithmetic.

Traps

Fixed pixel widths that force horizontal scrolling at 320px, height: 100% with no sized parent, 100vh on mobile browsers (prefer dvh), and reaching for !important instead of fixing specificity.