Layout Grids

Create any layout you can imagine with our tools. Here are some example layout grids using our framework, the concept of nesting containers in rows (instead of a column), and our modifiers.

Large Hero + 4 across

hero col

Code Example

<z-container>
    <z-row>
        <z-col class="theme-light h-300">hero col</z-col>
    </z-row>
    <z-row>
        <z-col class="theme-light">1</z-col>
        <z-col class="theme-light">2</z-col>
        <z-col class="theme-light">3</z-col>
        <z-col class="theme-light">4</z-col>
    </z-row>
</z-container>

Multi-section Right Panel (Container replaces right z-col)

large content area

long col

Code Example

<z-container>
    <z-row>
        <z-col class="theme-light">
        <p>large content area</p>
        </z-col>
        <z-container>
        <z-row class="pt-0">
            <z-col class="theme-light">1</z-col>
            <z-col class="theme-light">2</z-col>
        </z-row>
        <z-row>
            <z-col class="theme-light">long col</z-col>
        </z-row>
        <z-row>
            <z-col class="theme-light">long col</z-col>
        </z-row>
        <z-row class="pb-0">
            <z-col class="theme-light">long col</z-col>
        </z-row>
        </z-container>
    </z-row>
</z-container>

Multi-section Left Panel (Container replaces left z-col)

hero col

large content area

Code Example

<z-container>
    <z-row>
        <z-container>
            <z-row class="pt-0">
                <z-col class="theme-light h-225">hero col</z-col>
            </z-row>
            <z-row class="pb-0">
                <z-col class="theme-light">1</z-col>
                <z-col class="theme-light">2</z-col>
                <z-col class="theme-light">3</z-col>
            </z-row>
        </z-container>
        <z-col class="theme-light">
            <p>large content area</p>
        </z-col>
    </z-row>
</z-container>

note: Some items have height set, this is only to demonstrate the layouts. It's usually best to let the content dictate height. .

Featured Columns

feature-xl

col

feature-lg

col

feature-md

col

feature-sm

col

feature

col

Code Example

<z-container>
  <z-row>
    <z-col class="feature-xl theme-light">feature-xl</z-col>
    <z-col class="theme-light">col</z-col>
  </z-row>
  <z-row>
    <z-col class="feature-lg theme-light">feature-lg</z-col>
    <z-col class="theme-light">col</z-col>
  </z-row>
  <z-row>
    <z-col class="feature-md theme-light">feature-md</z-col>
    <z-col class="theme-light">col</z-col>
  </z-row>
  <z-row>
    <z-col class="feature-sm theme-light">feature-sm</z-col>
    <z-col class="theme-light">col</z-col>
  </z-row>
  <z-row>
    <z-col class="feature theme-light">feature</z-col>
    <z-col class="theme-light">col</z-col>
  </z-row>
</z-container>

Double Wide Columns

1 and 2

2 and 3

3 and 4

Code Example

<z-container>
  <z-row>
    <z-col class="card theme-light feature-xl">1 and 2</z-col>
    <z-col class="card theme-light">3</z-col>
    <z-col class="card theme-light">4</z-col>
  </z-row>
  <z-row>
    <z-col class="card theme-light">1</z-col>
    <z-col class="card theme-light feature-xl">2 and 3</z-col>
    <z-col class="card theme-light">4</z-col>
  </z-row>
</z-container>
<z-container>
  <z-row>
    <z-col class="card theme-light">1</z-col>
    <z-col class="card theme-light">2</z-col>
    <z-col class="card theme-light feature-xl">3 and 4</z-col>
  </z-row>
</z-container>

Bento Box Style

top bar

large content area

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est assumenda sit vero.

Code Example

<z-container>
  <z-row>
    <z-col class="theme-light">
      <p>large content area</p>
    </z-col>
    <z-container class="mobile:two-up gap-4">
      <z-row class="mt-0 mb-0 pb-0 pt-0">
        <z-col class="card theme-light h-200">
          <div class="flex-bottom">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est assumenda sit vero.</p>
          </div>
        </z-col>
      </z-row>
      <z-row class="mt-0 mb-0 pb-0 pt-0">
        <z-col class="card theme-light h-200">
          <div class="flex-bottom">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est assumenda sit vero.</p>
          </div>
        </z-col>
      </z-row>
    </z-container>
  </z-row>
</z-container>

Multiple Containers as columns

Code Example

<z-container>
    <z-row class="gap-0">
      <z-container>
        <z-row>
          <z-col class="theme-light">1</z-col>
        </z-row>
        <z-row>
          <z-col class="theme-light">1</z-col>
          <z-col class="theme-light">2</z-col>
        </z-row>
        <z-row>
          <z-col class="theme-light">1</z-col>
        </z-row>
      </z-container>

      <z-container>
        <z-row>
          <z-col class="theme-light h-305">1</z-col>
        </z-row>
        <z-row>
          <z-col class="theme-light h-145">2</z-col>
        </z-row>
      </z-container>

      <z-container>
        <z-row>
          <z-col class="theme-light h-150">1</z-col>
        </z-row>
        <z-row>
          <z-col class="theme-light h-300">2</z-col>
        </z-row>
      </z-container>
    </z-row>
  </z-container>

The Zen Test

Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.

So you can be assured it "just works". Try it out below.