One thing I find myself constantly googling over and over again is “css grid”. It is one of those areas that could almost be considered a requirement for every project no matter the size.  I used quite a few over the years and as browser support for new tools like flex-box and css grid has improved, it has been interesting to watch many of the more popular grid systems adapt and evolve. However, I must confess I rarely use them.

Meh to Frameworks

Frameworks and I do not get along. I find them often cumbersome, bloated, and unnecessary. On any typical web project you will at some point need to position elements within a grid of some kind. Whether it is a full site wide design or just one page. Despite this seemingly tried and true fact, I have yet to utilize a framework, bootstrap, or snippet that did not then force me to include some editing, overwriting, hacking, etc just to make it work within the site design. In other words, I tend to spend almost as much time removing or overwriting unnecessary framework styles as I do simply creating my own grid from scratch.

So I usually end up just coding something quick myself. A few small lines of css that give me a few basic grid sizes. One or two columns and a sprinkling of media queries to balance it all out. Of course the obvious problem with this is as a site grows the grid and quickly become overwhelmed and duplicative as more and more edge cases are needed.

What’s the Solution?

Over time I’ve grown smarter and actually began documenting my efforts. This historical trail of trial and error as led me to and very small little mixin I like to implement whenever a full grid system simple feels like overkill. The main reason I find it so useful is that it can be quickly removed and replaced with very little destruction to the remaining code base.

First we have the mixin,

@mixin columns($class, $index: 1, $grid-columns: 12) {
  @for $i from $index through $grid-columns {
   .col-#{$class}-#{$i} {
      width: percentage(($i / $grid-columns));
    }
  }
}

Ok, so what is going on?

Our “grid-columns” mixin takes a class identifier, starting index, and column base. Then it it run through a small for-loop, splitting up the grid into your typical equally divided widths based on your inputted column base.

Here is the gravy,

@include columns(xs);

@media (min-width: $screen-sm-min + 'px') {
  @include columns(sm);
}

This example includes a few variables for $screen-sm-min. This can be any value your site requires, but basically these variables are meant for your breakpoints.

Once we have the grid columns mixin established, we can work in the various grid sizes required. Working off of a focus on mobile first we can build out a base column size of “xs” or extra small. Remember the “xs” will be inserted into the column class name, so our smallest column will output “col-xs-1” … “col-xs-12”. This is then complimented with each additional media query mixin call. In the above, the next column size is “sm”, perhaps we are moving from 480px to 600px. Regardless of the size inputted, the outputted class will be “col-sm-1” inserted inside our small screen media query.

That’s it! A mere 7 lines of code can now be expanded to meet most grid needs. Of course this code only automates outputting the class width. However else you decided to implement the grid is dependent on your project. If you can use flex-box or css-grids, awesome, if not this works easily as well with floats and inline-block methods.

Enjoy :)!

Share Me!