CSS Layouts

Who needs a grid system anymore? Some useful CSS layouts using flex and grid for any project.

To use, copy the CSS from styles.css and drop it into your project. Then use the the HTML markup below.

View on Github

Stack

Stack items in a column

Stack item 1
Stack item 2
Stack item 3
<div class="stack"> 
  <div>Stack item 1</div> 
  <div>Stack item 2</div>
  ...
</div>

Change gap size

Adjust the space between items in the stack.
Options: stack-zero, stack-quarter, stack-half, stack-2x, stack-4x
Stack item 1
Stack item 2
Stack item 3
<div class="stack-2x"> 
  <div>Stack item 1</div> 
  <div>Stack item 2</div>
  ...
</div>

Bottom align last item

Stack item 1
Stack item 2
Last stack item
<div class="stack-end"> 
  <div>Stack item 1</div> 
  <div>Stack item 2</div>
  <div>Last stack item</div> 
</div>

Inline

Align items in a row

Inline item 1
Inline item 2
Inline item 3
<div class="inline"> 
  <div>Inline item 1</div> 
  <div>Inline item 2</div>
  ...
</div>

Change gap size

Options: inline-zero, inline-quarter, inline-half, inline-2x
Inline item 1
Inline item 2
Inline item 3
<div class="inline-2x"> 
  <div>Inline item 1</div> 
  <div>Inline item 2</div>
  ...
</div>

Align items with space between

Inline item 1
Inline item 2
<div class="inline-between"> 
  <div>Inline item 1</div> 
  <div>Inline item 2</div>
  ...
</div>

Wrap items on small viewports

Inline item 1
Inline item 2
Inline item 3
Inline item 4
Inline item 5
<div class="inline-wrap"> 
  <div>Inline item 1</div> 
  <div>Inline item 2</div>
  ...
</div>

Top align instead of center align

Inline item 1
Inline item 2
Inline item 3
<div class="inline align-top"> 
  <div>Inline item 1</div> 
  <div>Inline item 2</div>
  ...
</div>

Nested Stack and Inline

<div class="stack">
  <div class="inline inline-wrap">
    <div class="stack">
      <label>Label</label>
      <input />
    </div>
    <div class="stack">
      <label>Label</label>
      <input />
    </div> 
  </div>
  <div class="stack">
    <label>Label</label>
    <input />
  </div>
</div>

Grid Sidebar

Content with scrollable sidebar.

On mobile, collapse to 1 column with the order: Header → Sidebar → Content

Header
Content
<div class="grid-sidebar"> 
  <header class="header">Header</header> 
  <section class="content">Content</section> 
  <aside class="sidebar">Sidebar</div>
</div>

Grid ACB

Uses named sections to order content. Right align an image with a specific aspect ratio.

On mobile, collapse to 1 column with the order: Header → Image → Content

Header (Section A)
Content (Section B)
Image (Section C)
<div class="grid-acb"> 
  <header class="a">Header (Section A)</header> 
  <div class="b">Content (Section B)</div> 
  <div class="c">Image (Section C)</div>
</div>

Grid Blocks

A block of N items per row. Reduce items per row at breakpoints. Modify the number of items per row as needed

Grid Blocks 4

<ul class="grid-blocks-4"> 
  <li>Item 1</li>
  <li>Item 2</li>
  ...
</ul>

Grid Blocks 5

<ul class="grid-blocks-5"> 
  <li>Item 1</li>
  <li>Item 2</li>
  ...
</ul>

Grid Inline

Collapse items per row based on their fixed width (in this case 12rem) 

<ul class="grid-inline"> 
  <li>Item 1</li>
  <li>Item 2</li>
  ...
</ul>

Breakout

When you need a column of content like a blog post, with sections that "break out" eg. image or sections with a different background colour.

Source

Content

Feature content

Content

Full width content

Content

<div class="breakout"> 
  <p>Content</p>
  <div class="feature">Feature content</p>
  <p>Content</p>
  <div class="full">Full width content</p>
  ...
</div>