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:


  <div class="parent blue" >
  <div class="box coral" contenteditable>
    :)
  </div>

Explore on CodePen

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

Current Browser Support:


  <div class="parent white">
    <div class="box green">1</div>
    <div class="box green">2</div>
    <div class="box green">3</div>
  </div>

Explore on CodePen

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

Current Browser Support:

Min: 150px / Max: 25%

This element takes the second grid position (1fr), meaning it takes up the rest of the remaining space.


  <div class="parent">
    <div class="section yellow" contenteditable>
    Min: 150px / Max: 25%
    </div>
    <div class="section purple" contenteditable>
      This element takes the second grid position (1fr), meaning
      it takes up the rest of the remaining space.
    </div>
  </div>

Explore on CodePen

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

Current Browser Support:

Header

Main


  <div class="parent">
    <header class="blue section" contenteditable>Header</header>
    <main class="coral section" contenteditable>Main</main>
    <footer class="purple section" contenteditable>Footer Content</footer>
  </div>

Explore on CodePen

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

Current Browser Support:

Header

Left Sidebar

Main Content

Right Sidebar


  <div class="parent">
    <header class="pink section">Header</header>
    <div class="left-side blue section" contenteditable>Left Sidebar</div>
    <main class="section coral" contenteditable> Main Content</main>
    <div class="right-side yellow section" contenteditable>Right Sidebar</div>
    <footer class="green section">Footer</footer>
  </div>

Explore on CodePen

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

Current Browser Support:

Span 12

Span 6

Span 4

Span 2


  <div class="parent white">
    <div class="span-12 green section">Span 12</div>
    <div class="span-6 coral section">Span 6</div>
    <div class="span-4 blue section">Span 4</div>
    <div class="span-2 yellow section">Span 2</div>
  </div>

Explore on CodePen

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

Current Browser Support:


  <div class="parent white">
    <div class="box pink">1</div>
    <div class="box purple">2</div>
    <div class="box blue">3</div>
    <div class="box green">4</div>
  </div>

Explore on CodePen

08. Line Up `justify-content: space-between`

Current Browser Support:

Title - Card 1

Medium length description with a few more words here.

Title - Card 2

Long Description. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Title - Card 3

Short Description.


  <div class="parent white">
    <div class="card yellow">
      <h3>Title - Card 1</h3>
      <p contenteditable>Medium length description with a few more words here.</p>
      <div class="visual pink"></div>
    </div>
    <div class="card yellow">
      <h3>Title - Card 2</h3>
      <p contenteditable>Long Description. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
      <div class="visual blue"></div>
    </div>
    <div class="card yellow">
      <h3>Title - Card 3</h3>
      <p contenteditable>Short Description.</p>
      <div class="visual green"></div>
    </div>
  </div>

Explore on CodePen

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

Current Browser Support:

Title Here

Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.


  <div class="parent white">
    <div class="card purple">
      <h1>Title Here</h1>
      <div class="visual yellow"></div>
      <p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
    </div>
  </div>

Explore on CodePen

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

Current Browser Support:

Video Title

Descriptive text for aspect ratio card demo.


  <div class="parent white">
    <div class="card blue">
      <h1>Video Title</h1>
      <div class="visual green"></div>
      <p>Descriptive text for aspect ratio card demo.</p>
    </div>
  </div>

Explore on CodePen

1-Line Layouts*

01. Super Centered place-items: center

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

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

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

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

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

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

08. Line Up justify-content: space-between

Title - Card 1

Title - Card 2

Title - Card 3

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

Title Here

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

Video Title

01. Super Centered `place-items: center`

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

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

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

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

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

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

08. Line Up `justify-content: space-between`

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

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