Layouts

Flex

The CSS flexible box layout module defines a CSS box model optimized for user interface design, and the layout of items in one dimension.

flex-stretch

DIV-1

DIV-2

DIV-3

Example Code

<div class="flex-stretch">
  <div>DIV-1</div>
  <div>DIV-2</div>
  <div>DIV-3</div>
</div>

flex-stretch with gap

DIV-1

DIV-2

DIV-3

Example Code

<div class="flex-stretch gap">
  <div>DIV-1</div>
  <div>DIV-2</div>
  <div>DIV-3</div>
</div>

Flex Sidebar

A sidebar layout using the CSS flexbox layout model.

Example Code

<div class="flex-sidebar gap">
  <div>DIV-1 fixed</div>
  <div>DIV-2</div>
</div>

Flex sidebar right

Example Code

<div class="flex-sidebar-right gap">
  <div>DIV-1</div>
  <div>DIV-2 Fixed</div>
</div>

Flex sidebar row

Example Code

<div class="flex-sidebar column">
  <div>DIV-1 fixed</div>
  <div>DIV-2</div>
</div>

Flex Golden

A flex layout with two child elements whose widths follow the golden ratio.

DIV-1

DIV-2

Example Code

<div class="flex-golden gap">
  <div>DIV-1</div>
  <div>DIV-2</div>
</div>

Flex golden right

DIV-1

DIV-2

Example Code

<div class="flex-golden-right gap">
  <div>DIV-1</div>
  <div>DIV-2</div>
</div>

Grid Auto

A responsive CSS grid that automatically fits items into columns without media queries.

Card 1

Card 2

Card 3

Card 4

Example Code

<div class="grid-auto">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
  <div>Card 4</div>
</div>

Holy Grail Layout

A classic layout pattern with a header, footer, a fluid center, and two fixed sidebars.

Header

Main Article

Example Code

<div class="holy-grail" style="min-height: 200px;">
  <header style="border: 1px dashed var(--secondary-4); padding: 1rem;">Header</header>
  <main class="gap">
    <nav style="border: 1px dashed var(--secondary-4); padding: 1rem;">Nav</nav>
    <article style="border: 1px dashed var(--secondary-4); padding: 1rem;">Main Article</article>
    <aside style="border: 1px dashed var(--secondary-4); padding: 1rem;">Aside</aside>
  </main>
  <footer style="border: 1px dashed var(--secondary-4); padding: 1rem;">Footer</footer>
</div>