Gridz Utility Classes
The aim with these classes is to be able to layout almost anything with CSS grid that uses grid boxes of the same width value. This is primarily designed to be used inside of the legacy grid at either mobile, 700px or 940px.†
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.
† Note: While these classes may be helpful for some uses, you may want to consider using the grid-column classes which has more flexibility and better handles larger, full-bleed containers.
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-0gridz-gap-5gridz-gap-10gridz-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. This can be added at the container level or at each individual gridz-box. The default grid-padding value is 20px — here are the override options:
gridz-padding-0gridz-padding-5gridz-padding-10gridz-padding-15gridz-padding-20‡gridz-padding-40
Note: the regular padding classes can be used as well for individual boxes.
‡ 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 with a sidebar. 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. This box also has more text than the others one do.
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. This box also has more text than the others one do.
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>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…