[{"data":1,"prerenderedAt":14},["ShallowReactive",2],{"post-css-layout-without-the-hacks":3},{"_path":4,"title":5,"description":6,"date":7,"tags":8,"readingTime":12,"body":13},"\u002Fblog\u002Fcss-layout-without-the-hacks\u002F","CSS Layout Without the Hacks","Modern Flexbox and Grid techniques that replace brittle floats, magic numbers, and overflow tricks.","2026-05-12",[9,10,11],"css","frontend","design",2,"# CSS Layout Without the Hacks\n\nA lot of “clever” CSS from older codebases exists because Flexbox and Grid were not widely usable yet. Today you can drop most of those workarounds.\n\n## Start with Grid for the page, Flex for the row\n\nUse Grid when you care about **both axes**—page shells, card grids, split heroes. Use Flex when you care about **one axis**—toolbars, tag lists, button groups.\n\n```css\n.cards {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));\n  gap: 1.25rem;\n}\n\n.cta-row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.75rem;\n  align-items: center;\n}\n```\n\n`gap` alone removes a surprising amount of margin math.\n\n## Intrinsic sizing beats magic numbers\n\nPrefer `minmax`, `clamp`, and container-aware units over fixed pixel widths:\n\n```css\n.measure {\n  max-width: 65ch;\n}\n\n.hero-title {\n  font-size: clamp(2rem, 4vw + 1rem, 3.5rem);\n}\n```\n\nYour layout adapts without a pile of media-query overrides.\n\n## Alignment without absolute positioning\n\nSticky footers, equal-height columns, and centered stacks are one-liners now:\n\n```css\n.page {\n  min-height: 100dvh;\n  display: grid;\n  grid-template-rows: auto 1fr auto;\n}\n\n.center {\n  display: grid;\n  place-items: center;\n}\n```\n\nReserve absolute positioning for overlays and decorative layers—not core structure.\n\n## Wrap-up\n\nWhen a layout fight starts, ask: is this a Grid problem or a Flex problem? Choosing the right primitive usually deletes the hack entirely.",1784110285916]