We've touched on the basics of creating grids; these can be really time consuming to create from scratch, so with so many already available online, it makes better sense to use a prebuilt version unless your requirements are such that you can't find one that works for you! It is worth spending time researching what is available, as no two grids are the same.

As an example of what is available and to prove that we don't need all the bells and whistles that grids can offer, let's take a look at an example grid, in the form of Gridism. We can see an example of how our next demo looks like when completed, in this screenshot:

Although this library has been around for two to three years, its simplicity proves that we don't need to implement a complex solution in order to create the basis for a simple layout. The flexbox attribute in CSS is perfect for creating grids, but its flexibility adds a layer of complexity that isn't needed; instead, we'll make use of the box-sizing attribute, which will work just as well.

Created by Cody Chapple, it doesn't make use of flexbox (of which more, anon), but does make use of box-sizing as an attribute in the grid. The library can be downloaded from https://github.com/cobyism/gridism/blob/master/gridism.css (or installed using Bower), but as it consists of one file only, we can simply copy the contents to a text file and save it that way (and still keep to our earlier aim of not downloading content).

Let's make a start:

Notice how the grid has automatically realigned itself? The trick here is not in the style.css file, but within gridism.css; if we open it in a text editor and look for this block of code, on or around lines 50-61, it will look like this:

We can see that the library makes good use of percentage values to assign a width to each block. The real crux of this is not in the widths set, but the size of our container; for gridism, this is set to 978px by default. So, for example, if we were to set a cell width of .one-third, we would want 33.3332% of 736px, or 245.33px. We then ensure all grid cells have the right dimensions by applying the box-sizing attribute to each of our grid cells.

See how easy that was? In place of having to work out percentages, we simply specify the name of the column type we need, depending on how wide we need it to be:

Hold on a moment. How come the screenshot shows 215.33, and not 245.33, as the calculation indicated it should be?

Aha, this is just something we need to be mindful of; when working with a grid system like Gridism, the calculations are based on the full width of our viewport. Any padding required will be included within the width calculations of our column, so we may need a slightly larger column then we anticipate! It goes to show that even though our grid system doesn't have all of the mod-cons of current systems, we can still produce a useable grid, as long as we plan it carefully.

Okay, let's move on. We talked in passing about the fact that many grids use flexbox to help control their appearance; this is a great option to use, but can require setting a lot of additional properties that would otherwise be unnecessary for simple layouts. With careful planning, there is every possibility that we can avoid using it, but if we're working on a complex layout with lots of different elements, then there will be occasions when using it will avoid a lot of heartache! With this in mind, let's take a quick look at the basics of how it works in more detail.