1-Line Layouts*

*10 Modern CSS layout and sizing techniques that highlight just how robust and impactful a single-line of styling code can be. [Watch the Video]

01. Super Centered place-items: center

Current Browser Support:
  • Edge
  • Firefox
  • Chrome
  • Safari

02. The Deconstructed Pancake flex: 0 1 <baseWidth>

Current Browser Support:
  • Edge
  • Firefox
  • Chrome
  • Safari

03. Sidebar Says grid-template-columns: minmax(<min>, <max>) ...

Current Browser Support:
  • Edge
  • Firefox
  • Chrome
  • Safari

04. Pancake Stack grid-template-rows: auto 1fr auto

Current Browser Support:
  • Edge
  • Firefox
  • Chrome
  • Safari

05. Classic Holy Grail Layout grid-template: auto 1fr auto / auto 1fr auto

Current Browser Support:
  • Edge
  • Firefox
  • Chrome
  • Safari

06. 12-Span Grid grid-template-columns: repeat(12, 1fr)

Current Browser Support:
  • Edge
  • Firefox
  • Chrome
  • Safari

07. RAM (Repeat, Auto, Minmax) grid-template-columns: repeat(auto-fit, minmax(<base>, 1fr))

Current Browser Support:
  • Edge
  • Firefox
  • Chrome
  • Safari

08. Line Up justify-content: space-between

Current Browser Support:
  • Edge
  • Firefox
  • Chrome
  • Safari

09. Clamping My Style clamp(<min>, <actual>, <max>)

Current Browser Support:
  • Edge
  • Firefox
  • Chrome
  • Safari

10. Respect for Aspect aspect-ratio: <width> / <height>

Current Browser Support:
  • Edge
  • Firefox
  • Chrome
  • Safari