Flexbox and Grid layout

Choose the relationship the layout needs

Flexbox organizes items along a main axis and can create multiple lines, each with independent space distribution. Grid defines tracks that can align cards across rows and columns. In an action bar, Flexbox can adjust space between buttons.

In a catalogue where columns must align across several rows, Grid expresses that contract more directly. Start with the relationship between items without assuming that one technology always replaces the other.

Identify axes and child boxes

In the example, the bar uses row in horizontal-tb: the main axis is horizontal and align-items acts across it. If changed to column, justify-content operates along the column. Direct article children of the catalogue are grid items; their headings do not automatically join the same grid.

Introducing a wrapper changes which boxes participate in layout, just as it can change selector matching. Record the box tree before adjusting alignment.

Distribute additional space

Flex-grow distributes free space starting from the bases; equal factors do not guarantee equal final widths. With 500px available and bases of 100px and 200px, 200px remains. Two growth factors of one add 100px to each item, producing 200px and 300px.

This calculation excludes gaps, margins and min/max limits. If space is missing, flex-shrink and minimum constraints enter another phase; do not automatically use the growth calculation to explain every shrinking result.

Minimums that prevent shrinking

A flex item with min-width: auto can be constrained by its content minimum. With an unbreakable word, increasing flex-shrink may not fix box overflow. Min-width: 0 removes that automatic minimum but does not teach text to wrap or clip content.

In Grid, minmax(0, 1fr) distinguishes an explicit zero minimum from a 1fr track with an automatic minimum. Treat box sizing and content behavior as related decisions, each with its own consequences.

Tracks, gaps and implicit rows

In the example’s two-column grid, the gap occupies space between tracks. With 620px of content and a 20px gap, 600px remains for two equal fractions: 300px per column under the example’s explicit constraints. Additional rows generated to accommodate articles belong to the implicit grid.

Grid-auto-rows controls those rows while grid-template-columns defines explicit columns. Do not confuse creating a track with increasing space between tracks.

Automatic repetition and variable content

Repeat(auto-fill, minmax(160px, 1fr)) creates as many repeated tracks as sizing conditions permit. Auto-fit adds a difference after placing items: empty repeated tracks collapse, including associated gaps. A track spanned by an item is not empty for this rule.

Use the distinction to decide whether a catalogue should retain space for potential cards or distribute space among existing ones; it does not duplicate content or change document order.

Preserve a meaningful sequence

Order and grid-auto-flow: dense can change visual sequence without rewriting the DOM or ordinary sequential navigation. In a gallery without a required sequence, filling gaps may be acceptable; in a form with dependent steps, it can put step three before step two.

Exercises exclude scripts, special tabindex and additional reading-order mechanisms. Evaluate structural and visual sequence; a grid without empty spaces does not prove that users encounter actions in the correct order.

Common pitfalls

Confusing flex-grow with final width; ignoring gaps; thinking min-width: 0 fixes text; applying dense to dependent steps; assuming every descendant is a grid item.