From table hacks to semantic grids — a practitioner's guide
Jane Smith
12 min read
Web layouts have always reflected the tools available. Tables gave way to floats, floats to flexbox, flexbox to grid. Each generation removed a hack and replaced it with intent.
## The table era
Early layouts were built from `
` elements. They worked, barely:
- Inflexible at every breakpoint
- Impossible to maintain at scale
- Semantically meaningless
The web outgrew them in under a decade.
## The modern toolkit
Today four primitives handle virtually every layout need:
1. **CSS Grid** — two-dimensional placement with named areas and tracks
2. **Flexbox** — single-axis distribution with automatic wrapping
3. **Custom Properties** — runtime-variable tokens that cascade through components
4. **Container Queries** — responsive rules scoped to the component, not the viewport
Together they make external grid frameworks unnecessary.
## Layout patterns in practice
### The reading column
A single centered column, 60–75 characters wide. Ideal for long-form content like this article. The `focused` environment mixin produces it with one line of SCSS.
### The dashboard grid
A dense, auto-fitting grid of metric panels. The `distributed` environment mixin handles column count, gap, and reflow. No media queries required.
### The sidebar + content pair
Documentation pages, settings panels, and admin tools all share this shape. The `convergent` environment mixin sets the ratio and collapse behavior.
## Where the ontology fits
In the Genesis design system, each CSS concern belongs to exactly one ontological category. Layout is owned by `environment`. Typography by `cognition`. Surface treatment by `entity`. Mood by `atmosphere`.
This separation means a component's visual properties never conflict with its spatial properties. Refactoring one layer cannot break another.
## Conclusion
The best layout systems disappear. You describe what a region *is*, and the system determines how it looks. That's the direction modern CSS is heading — and it's where ontological design already lives.
