Grid system

Grid-system.markdown

Grid system

Mobile first simple grid system

A Pen by Sergio Peña on CodePen.

License.

index.html

<div class="grid-container">
  <div class="grid-1 color">.grid-1</div>
  <div class="grid-1 color">.grid-1</div>
  <div class="grid-1 color">.grid-1</div>
  <div class="grid-1 color">.grid-1</div>
  <div class="grid-1 color">.grid-1</div>
  <div class="grid-1 color">.grid-1</div>
  <div class="grid-1 color">.grid-1</div>
  <div class="grid-1 color">.grid-1</div>
  <div class="grid-1 color">.grid-1</div>
  <div class="grid-1 color">.grid-1</div>
  <div class="grid-1 color">.grid-1</div>
  <div class="grid-1 color">.grid-1</div>
</div>

<div class="grid-container">
  <div class="grid-2 color">.grid-2</div>
  <div class="grid-2 color">.grid-2</div>
  <div class="grid-2 color">.grid-2</div>
  <div class="grid-2 color">.grid-2</div>
  <div class="grid-2 color">.grid-2</div>
  <div class="grid-2 color">.grid-2</div>
</div>

<div class="grid-container">
  <div class="grid-3 color">.grid-3</div>
  <div class="grid-3 color">.grid-3</div>
  <div class="grid-3 color">.grid-3</div>
  <div class="grid-3 color">.grid-3</div>
</div>

<div class="grid-container">
  <div class="grid-4 color">.grid-4</div>
  <div class="grid-4 color">.grid-4</div>
  <div class="grid-4 color">.grid-4</div>
</div>

<div class="grid-container">
  <div class="grid-8 color">.grid-8</div>
  <div class="grid-4 color hide-mobile">.grid-4 hidden in mobile</div>
</div>

style.scss

/* Reset
============================ */
* {
  box-sizing: border-box;
}

.color {
  background: steelblue;
  color: white;
  font-size: 14px;
}



/* Variables
============================ */
$column-width: 65px;
$gutter-width: 20px;
$container-width: 1000px; // maximun width of the container
$bp1:  48em; // 768px / 16px
$bp2:  10.344827586em; // 1200px / 16px



/* Mixins
============================ */
@mixin grid-width($cols:1) {
  @if $cols == 1 {
    $mywidth: percentage($cols * $column-width / $container-width);
    width: $mywidth;
  }
  
  @if $cols > 1 {
    $mywidth: percentage(($cols * $column-width + $cols * $gutter-width - $gutter-width) / $container-width);
    width: $mywidth;
  }
  
}


/* Global
============================ */
body {
  background: #ccc;
}


.grid-container {
  padding-left: $gutter-width / 2;
  padding-right: $gutter-width / 2;
  margin-left: auto;
  margin-right: auto;
}



/* Media Queries
============================ */

@media (min-width: 1px) and (max-width: $bp1) {
  .grid-container > [class^="grid-"] {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  
  .hide-mobile {
    display: none;
  }
}

@media (min-width: $bp1) {
  
  /* Columns
  ============================ */
  
  .grid-container > [class^="grid-"] {
    float: left;
    min-height: 1px;
    padding: $gutter-width / 2;
    //padding-left: $gutter-width / 2;
    //padding-right: $gutter-width / 2;
    margin-left: percentage($gutter-width / $container-width)
  }
  
  .grid-container > [class^="grid-"]:first-child {
    margin-left: 0;
  }
  
  .grid-container > [class^="grid-"]:last-child {
    float: right;
  }
  
  /* Columns are 65px wide, with 20px gutter
  ============================================*/
  
  .grid-1 {
    @include grid-width($cols:1);
  }
  
  .grid-2 {
    @include grid-width($cols:2);
  }
  
  .grid-3 {
    @include grid-width($cols:3);
  }
  
  .grid-4 {
    @include grid-width($cols:4);
  }
  
  .grid-5 {
    @include grid-width($cols:5);
  }
  
  .grid-6 {
    @include grid-width($cols:6);
  }
  
  .grid-7 {
    @include grid-width($cols:7);
  }
  
  .grid-8 {
    @include grid-width($cols:8);
  }
  
  .grid-9 {
    @include grid-width($cols:9);
  }
  
  .grid-10 {
    @include grid-width($cols:10);
  }
  
  .grid-11 {
    @include grid-width($cols:11);
  }
  
  .grid-12 {
    @include grid-width($cols:12);
  }
  
  /* Clearfix
  ============================================*/
  .group:after,
  .grid-container:after {
    content: " ";
    display: table;
    clear: both;
  }  
}

@media (min-width: 1200px) {
  .grid-container {
    max-width: 1100px;
  }
}