100 Layouts

100 Layouts is my side project to create 100 designs to study layouts and typography. Most pages use photos of Los Angeles and include some of my favorite locations. I like to call it an ethnographic love story for LA. All layouts use CSS grid. And other modern CSS properities like flexbox, shapes, transforms, animations and multi-column. Font selections come from Google and Adobe collections. I plan to use variable fonts and web fonts served here. I'll keep a list of type specimens for review. If you'd like to view code or contact me find links in the footer.

Scott Gruber
Los Angeles. 2018


  1. Flying into LAX
  2. DTLA The Park
  3. Bonaventure Hotel
  4. Santa Monica Pier
  5. Brown Pelican Mural, Venice
  6. Walt Disney Concert Hall #1
  7. Walt Disney Concert Hall #2
  8. Walt Disney Concert Hall #3
  9. Walt Disney Concert Hall #4
  10. Color palettes, Santa Monica mountains
  11. Swatch color palettes
  12. Interaction of Color, Joseph Albers
  13. Swiss poster
  14. Disney Hall, polygon & clip-path
  15. LA Audubon Bird palettes
  16. Santa Monica Mountains