One-Line Layouts

10 modern layouts in 1 line of CSS

by Una Kravets

In this article and related resources Una shows how to create modern layouts with just a small amount of CSS. The layouts mostly use CSS Grid and Flexbox.

• Article (written and video): https://web.dev/one-line-layouts/ 
• Editable Demo Examples on Glitch: https://1linelayouts.glitch.me/ 
• GitHub Repository: https://github.com/una/1linelayouts 
• YouTube Video page [21m 38s]: https://youtu.be/qm0IfG1GyZU 

And here are the layouts on Codepen:

1. 01. Centered AF
2. 02. Deconstructed Pancake
3. 03. Sidebar Says
4. 04: Pancake Stack (Header, Main, Footer)
5. 05: Holy Grail
6. 06: 12-Span Grid
7. 07: RAM (Repeat, Auto, Minmax)
8. 08: Line It Up!
9. 09: Clamping my Style
10. 10: Respect the Aspect