I’m going to make an assumption right off the bat. You’ve used a framework’s grid before. Be it Bootstrap, Semantic-UI, Foundation…whatever the case may be. Have you ever needed to go in and remove some of the styles that you don't want? I know I have. Some frameworks like to add padding, background colors, borders, font styles…just to use a grid.

So, how can we get away from this with minimal amount of time? Sass (scss in this case) to the rescue! With Sass’s loop and variable functionality, we can easily create a responsive grid in under five minutes.

Simple responsive grid example

This grid will set independent columns that vary between 1/16 and 16/16 columns. Each div is floated to the left and set at a certain width. At varying breakpoints, the width changes to keep content readable.

  $totalCols: 16;
.grid {
   position: relative;
   @include clearfix;

   .row {
      @include clearfix;
      @media screen and (min-width: 850px) {
        margin-bottom: 1em;
      } 
   }

  [class*=”col-”] {
    float: left;
    padding: 1em;
    width: 100%;
    min-height: 1px; 
    position: relative;
  }

    @for $i from 1 through $totalCols {
    .col-#{$i}-#{$totalCols} 
    { 
        width: 100%;

      @media screen and (min-width: 768px) 
      {
         width: 50%;
      }
      @media screen and (min-width: 993px) 
      {
         width: 100% / $totalCols * $i;
      }
    }
  }
}

   <div class="col-2-16">2 Columns</div>
 <div class="col-10-16">10 Columns</div>
 <div class="col-4-16">4 Columns</div>

The above code will create a fluid 16 column grid with floated columns. When the screen has a min-width of 993px wide, it will set each column to the desired width (1 column is 0.0625% width of the grid, 16 columns is 100% width...). Between 768px and 992px, the width of each column will be 50% and below that each column will be 100% width of the wrapper.

The sass loop above simply loops through the total number of columns and creates classes such as .col-1-16, .col-2-16 and continues all the way to .col-16-16. I like this style of class name because you see it is a column, it is 2 columns wide inside of a 16 column grid. To change the number of columns that are in the grid, simply change the $totalCols variable to whatever you want.

If you want a 12 column grid you would set $totalCols to 12. The sass loop would then create classes such as .col-1-12 all the way up to .col-12-12.

Preview

See the Pen Simple Responsive Scss Grid by Grant Vinson (@vinsongrant) on CodePen.


Equal height columns grid example

This grid will give you equal height columns in a row, no matter their content. Perfect for responsive equal sized boxes. This technique uses the display:table-cell layout. Older IE versions do not support these feature 100%.

  $totalCols: 16;

.equal-height.grid {
    position: relative;
    display: table;

    // Targets all column classes
    [class*=”col-”] {
       min-height: 1px;
       vertical-align: top;
       display: block;
       @media screen and (min-width: 768px) {
          display: table-cell;
       }
    }

    // Loops through the $totalCols variable
    // and sets the classes for each column
    // based on media queries
    @for $i from 1 through $totalCols {
       .col-#{$i}-#{$totalCols} { 
          width: 100%;
          @media screen and (min-width: 768px) {
             width: 100% / $totalCols * $i;
        }
     } 
   } 
}

Equal height columns used to give me such a headache...and take forever. I would have tons of media queries setting each height of individual columns whenever the layout broke. This was terrible when implemented into a CMS.

Then, I found display: table-cell.

What is going on in the above grid is different from the previous example. This grid uses display: table-cell to create a grid instead of floating each column. When a row is created in a table, each column takes up the same amount of height. If you want to see this in action, create an html table and place some content in each column. Make one column's content a lot longer than the others. You will notice the other columns grow with the larger one. This is how tables are supposed to work as well as the display: table-cell property.

Preview

See the Pen Simple Responsive Scss Grid by Grant Vinson (@vinsongrant) on CodePen.

Results

As you can see, rwd grids are quite easy. If you are using an entire framework just for grids and maybe some icons, stop it. If needed, it is quite simple to mimic css/html class names from previous markup.

Obviously, a lot of developers utilize much more than the grid of a framework. When I was younger and less educated in this field, I would throw and entire framework into a project just for a few simple elements that I could have easily created on my own.

Writing your own code does allow for some “mistakes” or code that isn’t as optimized as it could be. However, it does give you the ability to only have the styles you want, not the ones you have to overwrite or remove. Best of all, you learn how the greats created these components and are hopefully able to improve on these ideas.


Signing off for now,

Grant Vinson

Follow me on Twitter


2,235 3 28