Responsive Flexbox and Grid

Flexbox and Grid can both adapt without a long list of device-specific breakpoints.

Flexbox arranges items along an axis and can wrap into more lines when space runs out. Grid defines columns and rows, with repeat(auto-fit, minmax(...)) providing a practical fluid card layout.

Use min-width:0 when long content prevents flexible children from shrinking. Choose the model that represents your layout, rather than using both everywhere.

Wrapping Flex items form lines independently. Grid cards share common column tracks, producing aligned columns across rows.

Cards wrap when their minimum basis no longer fits.

HTML

<div class="cards"><article>Analytics</article><article>Reports</article><article>Settings</article></div>

CSS

.cards { display: flex; flex-wrap: wrap; gap: 10px; } .cards article { flex: 1 1 145px; min-width: 0; padding: 18px; border-radius: 9px; background: #dbeafe; }

Rendered output

Observe: Cards share free space and wrap to additional lines.

Use repeat and minmax for repeated two-dimensional tiles.

HTML

<div class="cards"><article>Analytics</article><article>Reports</article><article>Settings</article></div>

CSS

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), 1fr)); gap: 10px; } .cards article { min-width: 0; padding: 18px; border-radius: 9px; background: #ccfbf1; }

Rendered output

Observe: Grid cards align in tracks as the number of columns changes.

Wrapping Flex items form lines independently. Grid cards share common column tracks, producing aligned columns across rows.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• Without flex-wrap, items may compress unexpectedly or overflow.

• An unbreakable string can still overflow an otherwise responsive grid.

Add a fourth card and compare how Flexbox and Grid distribute the final row.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Flexbox is strong for rows; Grid is strong for structured card collections.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.