How to build a floated grid of elements with Gridset CSS

Creating a grid of uniform-sized elements in CSS using floats has always been a bit tricky.

Screen_Shot_2014-01-20_at_16.46.16.png

This pattern is quite common and can be useful for sections where the exact number of elements cannot be known, but for most grid systems this means a lot of custom code in your CMS to apply the right class at the right position. This can be made relatively easier using the Gridset CSS classes.

First a caveat: This is best used with grids using columns of the same size (even ratio). If your columns are different widths, this method will likely produce elements that do not align to the grid.

In our example, we will flow 6 items into a 4 column grid. First, we select the width we want our items to be. Since each column is the same size, any span will do. Let’s use .d2, and to allow things to flow, regardless of placement, we will add the .d-floatleft class:

<article class="d2 d-floatleft"><img src="http://placehold.it/800x600" /></article>
<article class="d2 d-floatleft"><img src="http://placehold.it/800x600" /></article>
<article class="d2 d-floatleft"><img src="http://placehold.it/800x600" /></article>
<article class="d2 d-floatleft"><img src="http://placehold.it/800x600" /></article>
<article class="d2 d-floatleft"><img src="http://placehold.it/800x600" /></article>
<article class="d2 d-floatleft"><img src="http://placehold.it/800x600" /></article>

Now your example may look like this:

Screen_Shot_2014-01-20_at_16.36.15.png

Not exactly what we want, as the fourth element is breaking to the next line. To fix this, we need to remove the right margin off of every fourth element. You can accomplish this with one of two methods, depending on which is easiest within your CMS, and which browsers you are supporting:

  1. Using nth-child - You can use the nth-child selector to remove the margin. For example:
    .d-floatright:nth-child(4n) {
    margin-right: 0;
    }
    
    “4n“ here means “every fourth element”. This is the easiest method, but is not supported by IE8 or below, and means the layout would look different in those browsers. This could be an acceptable compromise, though.
  2. Creating a class - You can also create a class for every fourth element, and use it to remove the margin. This is a bit tough to do in some CMSs, but it will ensure the layout works in all browsers. In this example, we would add the class of end to the fourth element:
    <article class="d2 d-floatleft"><img src="http://placehold.it/800x600" /></article>
    <article class="d2 d-floatleft"><img src="http://placehold.it/800x600" /></article>
    <article class="d2 d-floatleft"><img src="http://placehold.it/800x600" /></article>
    <article class="d2 d-floatleft end"><img src="http://placehold.it/800x600" /></article>
    <article class="d2 d-floatleft"><img src="http://placehold.it/800x600" /></article>
    <article class="d2 d-floatleft"><img src="http://placehold.it/800x600" /></article>
    
    And then remove the margin in our CSS:
    .end {
    margin-right: 0;
    }
    

An !important flag may be needed depending on how you write your selectors. A class, though, should be specific enough to override Gridset’s default margins.

And in Sass

With Gridset‘s Sass mixins, this would be even simpler, needing no classes at all:

article {
  @include gs-span(d, 2);
  @include gs-float(d, left);
  &:nth-child(4n) {
    margin-right: 0;
  }
}

The gs-span mixin gives it the proper width and the gs-float mixin floats it left and gives it the proper margin. The & is Sass syntax for re-using the initial selector, and using :nth-child we can remove the outside margin.