Constraints shape the architecture
Pre- Flexbox and CSS Grid, equal height cards in a responsive grid meant floats, clearfix, and a bit of JS. On Dec 25, 2015 I shipped One Grid, under 1 KB, for fixed-height infinite blocks. Christmas day hack, yes really. The quiet lesson: constraints pick the architecture. šš
How it worked:
ā¢ Layout: floats plus a micro clearfix. Gutters with negative container margins and child padding using border box.
ā¢ Height: tiny JS grouped cards by visual row via offsetTop and set the max height inline.
ā¢ Behavior: debounced resize and reflow. No deps.
Tradeoffs:
ā¢ Source order controlled layout
ā¢ Forced reflow on measure, thrash on long lists
ā¢ Late images and webfonts needed another pass
What aged well vs not:
ā¢ Well: a strict bytes budget under 1 KB forced clarity. Zero tooling kept adoption simple.
ā¢ Not: floats, clearfix, and JS equalization. Today I would reach for Grid or Flex with gap, align items stretch, grid auto rows, aspect ratio, and object fit. Less jank and better a11y. Bigger lesson: pick primitives that are converging and design to delete code later.
If I built it today I would use grid template columns repeat auto fill with minmax, gap for gutters, aspect ratio for tiles, and maybe container queries instead of page wide breakpoints.
Here’s the project: https://github.com/AnandChowdhary/one-grid