https://1linelayouts.glitch.me/

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

HTML CSS
Explore on CodePen

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

Current Browser Support:

  * Edge
  * Firefox
  * Chrome
  * Safari

HTML CSS
Explore on CodePen

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

Current Browser Support:

  * Edge
  * Firefox
  * Chrome
  * Safari

HTML CSS
Explore on CodePen

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

Current Browser Support:

  * Edge
  * Firefox
  * Chrome
  * Safari

HTML CSS
Explore on CodePen

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

Current Browser Support:

  * Edge
  * Firefox
  * Chrome
  * Safari

HTML CSS
Explore on CodePen

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

Current Browser Support:

  * Edge
  * Firefox
  * Chrome
  * Safari

HTML CSS
Explore on CodePen

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

Current Browser Support:

  * Edge
  * Firefox
  * Chrome
  * Safari

HTML CSS
Explore on CodePen

08. Line Up justify-content: space-between

Current Browser Support:

  * Edge
  * Firefox
  * Chrome
  * Safari

HTML CSS
Explore on CodePen

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

Current Browser Support:

  * Edge
  * Firefox
  * Chrome
  * Safari

HTML CSS
Explore on CodePen

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

Current Browser Support:

  * Edge
  * Firefox
  * Chrome
  * Safari

HTML CSS
Explore on CodePen
Made with love by @una for web.devlive