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.

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

Leave a comment