MENU


Flex, Grid and Columns

Flexbox, grid and multi-column layout divide whatever width they get, so these patterns reflow without media queries, inside a sidebar as well as on a phone (Flexbox, Grid and Multiple Columns):

Three layouts that reflow without media queriesCSS
.cluster { display: flex; flex-wrap: wrap; gap: 1rem; }
.cluster > * { flex: 1 1 15rem; }            /* ideal 15rem, grow to fill, wrap when too narrow */
.cards { display: grid; gap: 1rem;
         grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.prose { columns: 20rem; column-gap: 2rem; }  /* as many 20rem columns as fit */

A wrapped flex line sizes its items on its own, so a lone last item stretches full width; grid keeps every row on the same tracks; columns suits flowing text, not cards. min(15rem, 100%) stops a container narrower than 15rem from overflowing.