Gridz Utility Classes

The aim with these classes is to be able to layout almost anything with CSS grid and avoid writing proprietary code. Custom code may be necessary sometimes, but we need to do this thoughtfully.

These grid classes have built in fallbacks for browsers who do not have grid support, in most cases, this falls back to using flexbox to give a similar experience.

To see an overall demonstration of the code and output, checkout this Codepen.

SASS Structure Location: … /sass/_utility.scss

Container

To setup a set of gridz boxes, you will need a containing element. This is usually a div as this container has no real semantic value. There are two required classes that need to be set on this container, one to setup the grid container (gridz) and one to determine how many grid boxes will be in each row (gridz-2, gridz-3 or gridz-4).

example

<div class="gridz gridz-3">
  ... gridz boxes ...
</div>

The sizing for this container is based on the width of the content section on a typical page on the Tyndale website at the largest screen size — 700px. These boxes will then reduce in size and/or wrap to a new line depending on the available screen space.

Default Gridz Settings

By default, grid boxes contained in a gridz container will have the following defaults:

   grid-gap: 20px;
   border: none;
   padding: 20px;
   background-color: white; //really none, but the page background is white 

Overriding Default Gridz Settings

The default settings of the gridz container and grid boxes contained inside of it can be overridden either at the container level or on individual box

gridz-gap-$

The gridz-gap-$ class will determine the amount of space between the grid boxes on all sides. This class should be placed on the container element. The default grid-gap is 20px — here are the override options:

  • gridz-gap-0
  • gridz-gap-5
  • gridz-gap-10
  • gridz-gap-15

the gridz-gap-$ class can only be set on the container, not on individual gridz-boxes

gridz-border

Adding this class will add a simple border to either all boxes (container) or an individual box (element) that is the appropriate color for the grid box — this is based on the box’s background color.

gridz-padding-$

The gridz-padding-$ class will determine the amount of padding in each of the grid boxes. The default grid-padding value is 20px — here are the override options:

  • gridz-padding-0
  • gridz-padding-5
  • gridz-padding-10
  • gridz-padding-15
  • gridz-padding-20
  • gridz-padding-40

the value of 20 is available in case the container value is set at some other value and you would like to override one individual box in that set with the value of 20.

gridz-bg-$ (background color)

The gridz-bg-$ class will determine the color of the background in each of the grid boxes. The default grid-bg value is none (white) — here are the override options:

  • gridz-bg-light — the $light variable value (#efefef), color: $dark (#222)
  • gridz-bg-dark — the $dark variable value (#222), color: $white (#fff)
  • gridz-bg-blue — linear-gradient(to right, #221155 0%,#1e1c8e 100%), color: $white (#fff)
  • gridz-bg-red — linear-gradient(to right, #b22 0%,#e22 100%), color: $white (#fff)

Note: link and heading colors have been adjusted for each background option.

Adding Grid boxes

Once you have your container setup you can start adding individual boxes to the container. Each of these grid boxes need to be contained inside a div using the class of gridz-box.

example

<div class="gridz gridz-3">
  <div class="gridz-box">
    ... gridz box content ...
  </div>
  <div class="gridz-box">
    ... gridz box content ...
  </div>
  <div class="gridz-box">
    ... gridz box content ...
  </div>
</div>

Example Usage

You can use a combination of classes to produce a number of different layouts — here are some examples. Note — these examples are using a special class (contained-700) to keep the same dimensions as the content section on the Tyndale website. The box-shadow area represents the page.

Grid 2 Columns with default settings

  <div class="gridz gridz-2">
    <div class="gridz-box">
      <h2>Grid Box Title</h2>
      <p>This is some example text with a <a href="#">link to nowhere</a> in it. Some boxes have more copy than others...</p>
    </div>
    <div class="gridz-box">
      <h2>Grid Box Title</h2>
      <p>This is some example text with a <a href="#">link to nowhere</a> in it.</p>
    </div>
    <div class="gridz-box">
      <h2>Grid Box Title</h2>
      <p>This is some example text with a <a href="#">link to nowhere</a> in it.</p>
    </div>
    <div class="gridz-box">
      <h2>Grid Box Title</h2>
      <p>This is some example text with a <a href="#">link to nowhere</a> in it. Some boxes have more copy than others...</p>
    </div>
  </div>

Grid Box Title

This is some example text with a link to nowhere in it. Some boxes have more copy than others...

Grid Box Title

This is some example text with a link to nowhere in it.

Grid Box Title

This is some example text with a link to nowhere in it.

Grid Box Title

This is some example text with a link to nowhere in it. Some boxes have more copy than others...


Grid 2 Columns with gap, background, border and padding overrides

<div class="gridz gridz-2 gridz-border gridz-bg-light gridz-gap-5 gridz-padding-40">
    <div class="gridz-box">
      <h2>Grid Box Title</h2>
      <p>This is some example text with a <a href="#">link to nowhere</a> in it. Some boxes have more copy than others...</p>
    </div>
    <div class="gridz-box">
      <h2>Grid Box Title</h2>
      <p>This is some example text with a <a href="#">link to nowhere</a> in it.</p>
    </div>
    <div class="gridz-box">
      <h2>Grid Box Title</h2>
      <p>This is some example text with a <a href="#">link to nowhere</a> in it.</p>
    </div>
    <div class="gridz-box">
      <h2>Grid Box Title</h2>
      <p>This is some example text with a <a href="#">link to nowhere</a> in it. Some boxes have more copy than others...</p>
    </div>
  </div>

Grid Box Title

This is some example text with a link to nowhere in it. Some boxes have more copy than others...

Grid Box Title

This is some example text with a link to nowhere in it.

Grid Box Title

This is some example text with a link to nowhere in it.

Grid Box Title

This is some example text with a link to nowhere in it. Some boxes have more copy than others...


Grid 3 Columns with border and gap override as well as single box color override

<div class="gridz gridz-3 gridz-border gridz-gap-10 ">
  
  <div class="gridz-box gridz-bg-blue gridz-border-none gridz-padding-40 text-center">
    <p><i class="fa fa-graduation-cap  fa-3x"></i><br />This is some example text with a <a href="#">link to nowhere</a> in it.</p>
    <p class="text-larger">Why don't you check it out!</p>
  </div>
  
  <div class="gridz-box">
    <h2>Grid Box Title</h2>
    <p>This is some example text with a <a href="#">link to nowhere</a> in it.</p>
    <p><a href="#" class="button">Some Button Text</a></p>
  </div>
  <div class="gridz-box">
    <h2>Grid Box Title</h2>
    <p>This is some example text with a <a href="#">link to nowhere</a> in it. This box also has more text than the others one do.</p>
    <p><a href="#" class="button">Some Button Text</a></p>
  </div> 
  
  <div class="gridz-box ">
    <h2>Grid Box Title</h2>
    <p>This is some example text with a <a href="#">link to nowhere</a> in it.</p>
    <p><a href="#" class="button">Some Button Text</a></p>
  </div>
  <div class="gridz-box">
    <h2>Grid Box Title</h2>
    <p>This is some example text with a <a href="#">link to nowhere</a> in it. </p>
    <p><a href="#" class="button">Some Button Text</a></p>
  </div> 
</div>


This is some example text with a link to nowhere in it.

Why don't you check it out!

Grid Box Title

This is some example text with a link to nowhere in it.

Some Button Text

Grid Box Title

This is some example text with a link to nowhere in it. This box also has more text than the others one do.

Some Button Text

Grid Box Title

This is some example text with a link to nowhere in it.

Some Button Text

Grid Box Title

This is some example text with a link to nowhere in it.

Some Button Text


Grid 2 Columns with border, image and padding override with inner padding

<div class="gridz gridz-2 gridz-padding-0 gridz-border">   
  <div class="gridz-box">
    <img src="https://www.tyndale.ca/sites/default/files/styles/16x9_featured/public/img/articles/2018-06/Students_on_steps_16x9.jpg?itok=AqMJkMCd" alt="" />
    <div class="gridz-inner gridz-padding-10">
      <h2>Grid Box Title</h2>
      <p>This is some example text with a <a href="#">link to nowhere</a> in it.</p>
      <p class="text-center"><a href="#" class="button">Button Text</a></p>
    </div>
  </div>
  <div class="gridz-box">
    <img src="https://www.tyndale.ca/sites/default/files/styles/16x9_featured/public/img/articles/2018-05/article-international-development.jpg?itok=wajr_NjP" alt="" />
    <div class="gridz-inner gridz-padding-10">
      <h2>Grid Box Title</h2>
      <p>This is some example text with a <a href="#">link to nowhere</a> in it. This box also has more text than the others one do.</p>
      <p class="text-center"><a href="#" class="button">Button Text</a></p>
    </div>
    
  </div>  
</div>

Grid Box Title

This is some example text with a link to nowhere in it.

Button Text

Grid Box Title

This is some example text with a link to nowhere in it. This box also has more text than the others one do.

Button Text

Note: this example introduces a new class that can be added to an internal div to add additional padding to just that div — gridz-inner. In this case, the containing gridz-box has no padding so that the image displays the full width, but we do want padding on the content section below it.


Grid 4 Columns with border and some box color overrides

<div class="gridz gridz-4 gridz-gap-10 gridz-border">
  <div class="gridz-box">
    <h2>Grid Box Title</h2>
    <p>This is some example text.</p>
    <p><a href="#" class="button">Button Text</a></p>      
  </div>
  
  <div class="gridz-box gridz-bg-blue">
    <h2>Grid Box Title</h2>
    <p>This is some example text.</p>
    <p><a href="#" class="button-white">Button Text</a></p>
  </div>

  <div class="gridz-box gridz-bg-red">
    <h2>Grid Box Title</h2>
    <p>This is some example text.</p>
    <p><a href="#" class="button-white">Button Text</a></p>
  </div>

  <div class="gridz-box">
    <h2>Grid Box Title</h2>
    <p>This is some example text.</p>
    <p><a href="#" class="button">Button Text</a></p>
  </div>

  <div class="gridz-box">
    <h2>Grid Box Title</h2>
    <p>This is some example text.</p>
    <p><a href="#" class="button">Button Text</a></p> 
  </div>

  <div class="gridz-box">
    <h2>Grid Box Title</h2>
    <p>This is some example text.</p>
    <p><a href="#" class="button">Button Text</a></p>      
  </div>
  
  <div class="gridz-box">
    <h2>Grid Box Title</h2>
    <p>This is some example text.</p>
    <p><a href="#" class="button">Button Text</a></p>      
  </div>  
  
</div>

Grid Box Title

This is some example text.

Button Text

Grid Box Title

This is some example text.

Button Text

Grid Box Title

This is some example text.

Button Text

Grid Box Title

This is some example text.

Button Text

Grid Box Title

This is some example text.

Button Text

Grid Box Title

This is some example text.

Button Text

Grid Box Title

This is some example text.

Button Text


If you would like to play with some ideas, you could checkout this Codepen and play around. This may be in disarray as it is used as a playground for myself as well…