I’m sick of these grids!

But not all of them. Here is my thoughts on grids that use floats (eg.: Bootstrap’s, Foundation’s, Materialize’s).

To be clear: floats break the flow of the page and is a pain in the ass if you want to vertically align content. And it is not aimed to be overly used, Eric A. Meyer put it well in his article:

They’re simply meant to take an element, put it to one side, and let other content flow around it. That’s all. […] If you use them for their original (albeit limited) purpose, though, they rock.

TL;DR

Use an inline-block grid system: csswizardry-grids and thank Harry Roberts on twitter for it!

We need them

It is hard to stumble upon a web app that doesn’t use a grid system. They help us organize our content, our component, have a consistent spacing, etc. Most people are familiar with popular grid system : Bootstrap’s, Foundation ’s, Materialize ’s, and many other. Many people use those grid systems because they come along with a framework : you start a project using Bootstrap so why bother considering another grid system?

So why am I pointing finger at those frameworks? Because they all use float based grid system. What bothers me about float? Content flow and vertical alignment.

Problems with floats

One common problem with floats is that you have to take some precaution to make surrounding elements to encompass the floated element (clear fixes, :after { display: table… })

The other problem is alignments, both vertical and horizontal. Float has not been made for that. Let’s take a look at a simple example: 3 columns with some text.

As each columns are floats element if we want to vertically align them, we can’t. If we want to have one column centered, we can’t (unless we push 4 columns left, but let’s be honest that’s a hack — And that’s possible only if your column size is a multiple of 12, try to align a .col-md-5 without getting rid of float).

So what?

So let’s use a grid system based on a simple CSS property: display: inline-block;

Here is how the W3C explains the inline-block property:

This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

This means that you can use the properties of an inline and a block element:

  • center vertically your columns: vertical-align: top|middle|bottom|
  • center horizontally any column (regardless of its size): text-align: center

Be aware of white spaces

As the element itself is formatted as an atomic inline-level element, white spaces will be considered. So if you have 2 columns with width: 50%, but there is a space in your HTML between your div, the total will be 100% + 1 space, which will make your second div to go under the first one. So don’t forget to use this little trick:

<!--HTML comments -->
Or use > in HAML to remove spaces between elements.

And please…

Don’t use grids when your content is aimed to occupy all the space. A simple div always do the trick.

Same if you want to align your content to the right or to the center, remember you can do: text-align: right instead of pushing a column of using a float.

So let’s get started, there you go: csswizardry-grids!