The CSS I Stopped Writing Once I Learned Flexbox and Grid

The short answer: once Flexbox and Grid clicked, I stopped writing float-based columns, clearfix hacks, negative-margin gutters, absolute-positioning-plus-transform centering, and any JavaScript that measured or set element heights for layout — because the engine now does all of that natively if you just ask it directly.

There's a specific kind of CSS I used to write that I now find almost funny to look at. Not bad CSS exactly — it worked, it shipped, people used it — but it was fighting the layout engine instead of asking it for what I wanted. Floats pretending to be columns. Negative margins pretending to be gutters. JavaScript pretending to be a layout system. Flexbox and Grid didn't just give me new tools; they let me delete whole categories of code I'd convinced myself were just "how CSS works." Here's the before/after.

Centering a box

The classic. Vertically centering a thing used to be a genuine interview question, which tells you everything. My go-to was absolute positioning plus a transform, and it was fragile the moment the content's size changed.

Three properties, no positioning context, no transform math, works for any content size. The "after" reads like a description of the goal instead of a workaround for the engine.

Columns

This is the one that still makes me wince. To get a row of equal columns I'd float them, calculate percentage widths by hand, and then — because floated elements collapse their parent — add a clearfix. We all copied the same clearfix snippet from the same Stack Overflow answer for the better part of a decade.

gap alone retired every negative-margin gutter hack I ever wrote. No more .row { margin: 0 -8px } paired with .col { padding: 0 8px } and the inevitable off-by-one at the container edge.

Two-dimensional layouts

Flexbox handles a row or a column. The moment I needed rows and columns to line up — a card grid, a page shell with a header, sidebar, content, and footer — I used to nest flex containers inside flex containers until the markup was a matryoshka doll. Grid is built for exactly this.

The layout is now readable as ASCII art in the stylesheet. A new teammate can see the structure of the whole page in six lines, and rearranging it is editing a string, not untangling nested divs.

Responsive card grids without media queries

The hack I'm least sad to lose: computing how many cards fit per row at each breakpoint with a stack of media queries. Grid does it with one line using auto-fill and minmax.

The JavaScript I deleted

The quiet win is all the layout code that left my JavaScript. I used to measure element heights with getBoundingClientRect to make two panels match, or to pin a footer to the bottom when content was short. Flexbox's flex: 1 and Grid's 1fr do that in the layout engine, synchronously, with no resize listeners and no reflow thrash. Every one of those useEffect-measures-the-DOM hooks was a bug waiting to happen, and modern CSS made them vanish.

The shift

The real change wasn't learning new properties — it was a change in posture. Old CSS was adversarial: I'd picture the layout, then reverse-engineer which hacks would trick the box model into producing it. New CSS is declarative: I describe the layout I want and let the engine solve it. I write a fraction of the code, it's more robust, and it reads like intent. If you're still reaching for a float or a translate(-50%, -50%) out of muscle memory, stop and ask the engine directly. It's been able to do what you want for years now.