Two Dimensions, Solved

Flexbox arranges items and lets their content decide the sizes. Grid works the other way around: you define the tracks — the columns and rows — first, and items are placed into the cells they make.

.grid {  display: grid;  grid-template-columns: 1fr 1fr 1fr;  gap: 1rem;}

No classes on the children, no widths, no wrapper elements. The container defines the shape and the items fall into it in order.

Rows are usually left implicit — grid-template-rows exists and you rarely need it, because the browser creates as many rows as the items require and sizes them to their content.

fr is a fraction of the available space, and it exists only in grid. It is the piece that makes the whole system pleasant.

grid-template-columns: 1fr 1fr;          /* two equal columns              */grid-template-columns: 2fr 1fr;          /* first twice as wide as second */grid-template-columns: 200px 1fr;        /* fixed sidebar, flexible main   */grid-template-columns: 200px 1fr 200px;  /* two sidebars                   */

The important difference from percentages: fr divides what is left after gaps and fixed tracks are taken out. Percentages divide the whole container and know nothing about the gap.

Mixing units in one definition is normal and useful:

grid-template-columns: auto 1fr auto;/* first and last sized to their content, middle takes the rest —   an icon, a label, and a button in a row */

A flex item can grow and shrink. It cannot occupy two columns while its siblings stay aligned in the grid, because in flexbox there is no grid for them to stay aligned to.

.featured {  grid-column: span 2;      /* two columns wide          */} .tall {  grid-row: span 2;         /* two rows tall             */} .hero {  grid-column: 1 / -1;      /* first line to last: full width */}

grid-column: 1 / -1 is useful to remember. Grid numbers the lines between tracks rather than the tracks themselves, and negative numbers count from the end — so -1 is always the final line whatever the column count. That makes it a full-width row that survives changing the grid.

.page {  display: grid;  grid-template-columns: 200px 1fr;  grid-template-areas:    "header header"    "sidebar main"    "footer footer";  gap: 1rem;} .page > header  { grid-area: header;  }.page > aside   { grid-area: sidebar; }.page > main    { grid-area: main;    }.page > footer  { grid-area: footer;  }

Rearranging the whole page is then editing those three strings. Note that this changes only the visual order — the DOM order is what a screen reader and the tab key follow, so do not use it to reorder anything where sequence carries meaning.

Two functions, and together they produce the most useful single line in modern CSS.

grid-template-columns: repeat(3, 1fr);            /* same as 1fr 1fr 1fr */grid-template-columns: repeat(4, minmax(0, 1fr));  /* four, and they may shrink */ /* The line worth memorising */.cards {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  gap: 1.5rem;}

Read it as: as many columns as fit, each at least 250 pixels, sharing any leftover space equally. On a phone that is one column. On a tablet, two. On a wide monitor, five. There is no media query and no breakpoint to choose.

The two are not competitors and real layouts use both, usually nested. The question is how many dimensions you are controlling.

/* Grid places the cards */.card-grid {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));  gap: 1.5rem;} /* Flex arranges the inside of each one */.card {  display: flex;  flex-direction: column;  gap: 0.75rem;} /* And this pushes the button to the bottom, so every card's   button lines up regardless of how long its text is. */.card .btn {  margin-top: auto;}

That last rule is a small piece of craft worth keeping. In a column flex container, margin-top: auto absorbs all the spare vertical space and pins the element to the bottom — so a row of cards with different amounts of text still has its buttons on one line.