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.

FEATURED

Empowering and Adaptable

Whether you choose to incorporate your existing code or make quick configurations, zenCSS aligns with your unique business requirements.

GUIDE

An article or blog post

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis beatae, vitae voluptates, odit eos possimus.

GUIDE

Another piece of content

Lorem ipsum dolor sit, amet consectetur elit. Ex architecto adipisci culpa! Iste dignissimos veniam.

GUIDE

A final post or page

Lorem ipsum dolor sit amet consec tetur, adipis cing elit, adipisicing elit. Nobis beatae.

Code Example Shortcut: z-layout-grid-7

  <z-container>
    <z-row class="gap-6 p-7 tablet:stack">
      <z-col class="card p-0 pt-0 ">
        <img src="../../docs/images/placeholder/16x9/douglas-bagg.jpg" alt="" class="mb-3">
        <p><span class="label bg-cta">FEATURED</span></p>
        <h2> An Empowering and Adaptable Platform</h2>
        <p>Whether you choose to incorporate your existing code or make quick configurations, zenCSS offers effortless customization to align with your distinct business requirements.</p>
      </z-col>

      <z-container class=" feature-sm">
        <z-row class="pt-0">
          <z-col class="p-0 m-0 d-flex align-items-start">
            <img src="../../docs/images/misc/lifestyle-product/1.jpg" class="w-100" alt="" />
            <div class="ml-3 p-1 up-10">
              <p class="m-1 ml-0"><span class="label">GUIDE</span></p>
              <p class="text-bold headline mb-0">An article or blog post</p>
              <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis beatae, vitae voluptates, odit eos possimus.</p>
            </div>
          </z-col>
        </z-row>
        <z-row class="pt-0">
          <z-col class="p-0 m-0 d-flex align-items-start">
            <img src="../../docs/images/misc/lifestyle-product/3.jpg" class="w-100" alt="" />
            <div class="ml-3 p-1 up-10">
              <p class="m-1 ml-0"><span class="label">GUIDE</span></p>
              <p class="text-bold headline mb-0">Another piece of content</p>
              <p class="text-sm">Lorem ipsum dolor sit, amet consectetur elit. Ex architecto adipisci culpa! Iste dignissimos veniam.</p>
            </div>
          </z-col>
        </z-row>
        <z-row class="pt-0">
          <z-col class="p-0 m-0 d-flex align-items-start">
            <img src="../../docs/images/misc/lifestyle-product/2.jpg" class="w-100" alt="" />
            <div class="ml-3 p-1 up-10">
              <p class="m-1 ml-0"><span class="label">GUIDE</span></p>
              <p class="text-bold headline mb-0">A final post or page</p>
              <p class="text-sm">Lorem ipsum dolor sit amet consec tetur, adipis cing elit, adipisicing elit. Nobis beatae.</p>
            </div>
          </z-col>
        </z-row>
      </z-container>
    </z-row>
  </z-container>

Image + Hover Text Grid

Photo:

Simon Berger

Photo:

Ali Kazal

Photo:

Maeva Vigier

Photo:

Tony Hughes

Photo:

Masahiro Miyagi

Photo:

Douglas Bagg

Photo:

Daniel Schwartz

Photo:

Lerone Pieters

Photo:

Kamil Wroblewski

Photo:

Nathan Cima

Photo:

Bailey Burton

Photo:

Haotain Zheng

Code Example Shortcut: z-layout-grid-1

<z-container>
    <z-row class="mobile:gap-0">
      <z-container>
        <z-row class="mobile:h-300">
          <z-col class="overlay-container overflow-hidden card-hover br-sm card">
            <img src="../../docs/images/placeholder/SimonBerger.png" class="bg-img" alt="">
            <div class="overlay-text">
              <p class="headline">Photo:</p>
              <p>Simon Berger</p>
            </div>
          </z-col>
        </z-row>
        <z-row class="mobile:h-600">
          <z-col class="overlay-container overflow-hidden card-hover br-sm card">
            <img src="../../docs/images/placeholder/16x9/AliKazal.jpg" class="bg-img" alt="">
            <div class="overlay-text">
              <p class="headline">Photo:</p>
              <p>Ali Kazal</p>
            </div>
          </z-col>
          <z-col class="overlay-container overflow-hidden card-hover br-sm card">
            <img src="../../docs/images/placeholder/16x9/MaevaVigier.jpg" class="bg-img" alt="">
            <div class="overlay-text">
              <p class="headline">Photo:</p>
              <p>Maeva Vigier</p>
            </div>
          </z-col>
        </z-row>
        <z-row class="mobile:h-300">
          <z-col class="overlay-container overflow-hidden card-hover br-sm card">
            <img src="../../docs/images/placeholder/16x9/tonyhughes.jpg" class="bg-img" alt="">
            <div class="overlay-text">
              <p class="headline">Photo:</p>
              <p>Tony Hughes</p>
            </div>
          </z-col>
        </z-row>
      </z-container>

      <z-container>
        <z-row>
          <z-col class="overlay-container overflow-hidden card-hover br-sm card h-305">
            <img src="../../docs/images/placeholder/16x9/masahiro-miyagi.jpg" class="bg-img" alt="">
            <div class="overlay-text">
              <p class="headline">Photo:</p>
              <p>Masahiro Miyagi</p>
            </div>
          </z-col>
        </z-row>
        <z-row class="mobile:h-300">
          <z-col class="overlay-container overflow-hidden card-hover br-sm card h-145">
            <img src="../../docs/images/placeholder/16x9/douglas-bagg.jpg" class="bg-img" alt="">
            <div class="overlay-text">
              <p class="headline">Photo:</p>
              <p>Douglas Bagg</p>
            </div>
          </z-col>
        </z-row>
      </z-container>

      <z-container>
        <z-row class="mobile:h-300">
          <z-col class="overlay-container overflow-hidden card-hover br-sm card h-200">
            <img src="../../docs/images/placeholder/16x9/daniel-schwartz.jpg" class="bg-img" alt="">
            <div class="overlay-text">
              <p class="headline">Photo:</p>
              <p>Daniel Schwartz</p>
            </div>
          </z-col>
        </z-row>
        <z-row>
          <z-col class="overlay-container overflow-hidden card-hover br-sm card h-250">
            <img src="../../docs/images/placeholder/16x9/lerone-pieters.jpg" class="bg-img" alt="">
            <div class="overlay-text">
              <p class="headline">Photo:</p>
              <p>Lerone Pieters</p>
            </div>
          </z-col>
        </z-row>
      </z-container>
    </z-row>
    <z-row class="mobile:h-1200 pt-0">
      <z-col class="overlay-container overflow-hidden card-hover br-sm card h-200">
        <img src="../../docs/images/placeholder/16x9/KamilWroblewski.jpg" class="bg-img" alt="">
        <div class="overlay-text">
          <p class="headline">Photo:</p>
          <p>Kamil Wroblewski</p>
        </div>
      </z-col>
      <z-col class="overlay-container overflow-hidden card-hover br-sm card h-200">
        <img src="../../docs/images/placeholder/16x9/nathan-cima.jpg" class="bg-img" alt="">
        <div class="overlay-text">
          <p class="headline">Photo:</p>
          <p>Nathan Cima</p>
        </div>
      </z-col>
      <z-col class="overlay-container overflow-hidden card-hover br-sm card h-200">
        <img src="../../docs/images/placeholder/16x9/bailey-burton.jpg" class="bg-img" alt="">
        <div class="overlay-text">
          <p class="headline">Photo:</p>
          <p>Bailey Burton</p>
        </div>
      </z-col>
      <z-col class="overlay-container overflow-hidden card-hover br-sm card h-200">
        <img src="../../docs/images/placeholder/16x9/haotain-zheng.jpg" class="bg-img" alt="">
        <div class="overlay-text">
          <p class="headline">Photo:</p>
          <p>Haotain Zheng</p>
        </div>
      </z-col>
    </z-row>
  </z-container>

Large Hero + 4 across

hero col

Code Example Shortcut: z-layout-grid-2

<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 Shortcut: z-layout-grid-3

<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 Shortcut: z-layout-grid-4

<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 Shortcut: z-layout-grid-5

<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 Shortcut: z-layout-grid-6

<z-container>
    <z-row class="mobile: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.