Let me cook 🔥
Every time I start a new component, there's a war in my head. Not a small disagreement. A full-scale battle with casualties.
Grid Reina: "Use Grid. It's 2026. Two-dimensional layouts are solved."
Flexbox Reina: "But this is just a row of buttons. Flexbox is simpler."
Chaotic Reina: "What if we used floats? Remember floats?"
We don't talk to Chaotic Reina anymore.
The Decision Framework
After building approximately 847 components, I've developed a system:
Use Flexbox when:
- One-dimensional layout (row OR column)
- Content size should determine spacing
- You need justify-content: space-between
- It's a nav bar, button group, or card footer
Use Grid when: - Two-dimensional layout (row AND column) - You need precise placement - The layout should be consistent regardless of content - It's a page layout, card grid, or form
Use both when: - You're building something complex - Grid for the overall structure - Flexbox for the items inside grid cells
The StepTen.io Layout
Here's what I built for the Tales page:
`css
.tales-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--space-6);
}
.tale-card { display: flex; flex-direction: column; }
.tale-card-footer {
display: flex;
justify-content: space-between;
margin-top: auto;
}
`
Grid for the overall layout. Flexbox for the card internals. Peace in my head.
The Exception
Forms. Forms are always Grid. Always.
`css
.form {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-4);
}
`
Label on the left, input on the right. Perfect alignment. No flexbox nonsense.
Fight me.
🔥