Grid

While CSS has gotten so easy and you can easily make your own grid, sometimes it’s nice to have some sort of system built in so every developer is on the same page.

Ignition comes with a simple grid using CSS Grid. It has span classes for changing the size of the items and has a fallback to use flexbox for old browsers.

The main thing to remember when using .grid is this:
All columns need a specific span size.

The columns are NOT set to stretch automatically and fill any empty space. In fact CSS Grid cannot do that without auto-fit and that is only when you want equal sized items. If that is the case, please use card-grid or flex-grid.

With grid, you will need to specify a span for each item. Grid is good to use when you have a specific layout you need and you know how many items there are and the layout you want.

How it Works

The grid is made of CSS Grid and creates your typical 12 columns grid with gutters of 30 px. You don’t have to supply any row or column classes. The CSS Grid takes care of it for you. The gutters are made using CSS Grid’s grid-gap which is very smart and powerful. It only adds gutters between items, and doesn’t add gutters on the outside of items at the edge of the grid.

Here is a simple example of the ignition grid:

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(1px, 1fr));
  grid-gap: $gap; //30px by default
}

By default the 12 columns are equal in size. All the items inside will be sized accordingly. This means by default the elements will have a tiny width to squish 12 items onto one line! You will need to use span classes to span items and set sizes on the elements. Like so:

<div class="grid">
  <div class="item span-4"></div>
  <div class="item span-4"></div>
  <div class="item span-4"></div>
</div>

Your goal, should you choose to accept it, is to make sure your items add up to 12.

You can add many items as long as they keep adding up to 12. Otherwise you will have empty spots. Here is another example:

<div class="grid">
  <div class="item span-4"></div>
  <div class="item span-6"></div>
  <div class="item span-2"></div>
  <div class="item span-3"></div>
  <div class="item span-6"></div>
  <div class="item span-3"></div>
</div>

I have a grid with items that add up to 12 twice. There will be two rows of items here. 

NOTE: the class .item in these demos is not necessary and was just added for styling purposes here.

Using Span-all

If you want a default size for all the items you can use span-all on the grid parent. This way you only specify the ones that are different. Like so.

<div class="grid span-all-4">
  <div class="item"></div>
  <div class="item span-6"></div>
  <div class="item span-2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Above we have two rows. The top row has two items with different sizes applied. The rest are defaulting to 4 spans. Here is what it looks like:

Media Queries

You can change the size of an item when the width of the screen reaches a new size. There are three sizes included: large, medium and small. All are defined in variables.scss. They are sass variables that start with the word “media”.

By default the regular span classes apply everywhere. By using the classes below you can change the span to only work at that size and below. 

• large-span-
• medium-span-
• small-span-

For example medium-span-5 will make an element that spans 5 columns but only when the screen is at the medium size and below. In this way you can make different sizes for different elements. You can also span all the items by adding to the grid container something like large-span-all-5.

Right now the classes work desktop first. While I agree that web design should start mobile first, it’s hard to see web development doing that because you need to write your content into separate divs if you plan on having them separate into two columns at any point, and usually at the small end everything collapses. So you can’t start mobile first… my opinion anyway.

Here is an example of a grid with some media queries.

<div class="grid span-all-4 small-span-all-12">
  <div class="item medium-span-5"></div>
  <div class="item span-6 medium-span-7"></div>
  <div class="item span-2 medium-span-4"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item medium-span-12"></div>
</div>

The above code would output the following grid:

To see the medium span take effect, resize your browser. You can play with the grid on the front page of the site and add your own classes to see how it all works.

Collapsing All Columns

By default all columns will collapse and all items will span all 12 columns when the window is small. You can override this using the small-span class. Or you can disable this ability by setting the following variable to false, found in variables.scss

$collapse-on-small: false;

No Gutters

If you do not want gutters between items for some reason, you can use the class .no-gutters on your grid parent. Or just apply grid-gap of 0 on your own.