The Multicolumn Challenge Accepted!

on YouTube ↗20m

" summary

Compares concrete implementations for multicolumn layouts using 1,000 elements and Chrome DevTools under CPU throttling: tables, display:table, floats with a tiny JS equalizer, flexbox, grid, and CSS columns. Measures paint times and finds CSS columns slowest (~1.5s), display:table and real tables fastest, grid and floated+JS intermediate, and flexbox fastest overall given current browser support; notes grid looks promising when support improves and tables trade performance for poor semantics.

AI-written summary · about

" chapters (6)

1. 0:00Multicolumn intro
2. 2:18Multicolumn techniques
3. 10:28Layout performance
4. 15:25Test results
5. 15:46Browser compatibility
6. 18:17Winners & conclusions

" related talks

• 49mPanel 4: Responsive LayoutRazvan Caliman, George Crawford, Andy Hume, Amber Weinberg · Edge Conference 2013
• 51mCreative CSS LayoutMichelle Barker · CSS Day 2022
• 52mModern CSS LayoutMichelle Barker · SmashingConf Freiburg 2022
• 50mCSS runtime performanceNolan Lawson · performance.now() 2022
• 43mModern CSS Layout is Awesome!Michelle Barker · beyond tellerrand Düsseldorf 2023
• 37mModern CSS Rendering Performance - Full-Scale OptimizationMichael Hladky · DevDays Europe 2022
• 39mNext Level CSSRachel Andrew · ffconf 2016
• 01h 02mStart Using CSS Grid Layout TodayRachel Andrew · Frontend United 2017