Tag: float grid

CSS SASS float grid explained

Posted on by NY Comdori

There is a couple of ways to implement CSS grid. Although float grid is not the most recommended method I still wanted to do that for academic purpose.

In this example, I am going to implement a CSS grid like the image below. There will be 6 rows total and each row will have its own columns.

HTML Code

Here is the HTML code showing how each row/columns are respresented. There will be 6 css classes to represent each column.
1. col-1-of-2: column size 1 out of 2 (50%)
2. col-1-of-3: column size 1 out of 3 (33%)
3. col-1-of-4: column size 1 out of 4 (25%)
4. col-2-of-3: column size 2 out of 3 (66%)
5. col-2-of-4: column size 2 out of 4 (50%)
6. col-3-of-4: column size 3 out of 4 (75%)

<section class="grid-test">
    <div class="row">
        <div class="col-1-of-2">
            Col 1 of 2
        </div>
        <div class="col-1-of-2">
            Col 1 of 2
        </div>
    </div>
    
    <div class="row">
        <div class="col-1-of-3">
            Col 1 of 3
        </div>
        <div class="col-1-of-3">
            Col 1 of 3
        </div>
        <div class="col-1-of-3">
            Col 1 of 3
        </div>
    </div>
    
    <div class="row">
        <div class="col-1-of-3">
            Col 1 of 3
        </div>
        <div class="col-2-of-3">
            Col 2 of 3
        </div>
    </div>
    
    <div class="row">
        <div class="col-1-of-4">
            Col 1 of 4
        </div>
        <div class="col-1-of-4">
            Col 1 of 4
        </div>
        <div class="col-1-of-4">
            Col 1 of 4
        </div>
        <div class="col-1-of-4">
            Col 1 of 4
        </div>
    </div>
    
    <div class="row">
        <div class="col-1-of-4">
            Col 1 of 4
        </div>
        <div class="col-1-of-4">
            Col 1 of 4
        </div>
        <div class="col-2-of-4">
            Col 2 of 4
        </div>
    </div>
    
    <div class="row">
        <div class="col-1-of-4">
            Col 1 of 4
        </div>
        <div class="col-3-of-4">
            Col 3 of 4
        </div>
    </div>
</section>

CSS (SASS) Code

There is a couple of things to note.

  • :not(:last-child) means select everything except the last child because we don’t want the last child to have margin bottom.
  • attribute selector [] in line 27. Note that there is a common code for all the column classes and we don’t want to repeat that. attribute selector is used in order to solve duplicate code. [class^=”col-“] means to select all the elements with the class attributes starts with ‘col-‘ string. It also implies that you can use any attributes to select elements.
  • calc is a provided function that can calculate an equation. It is able to accept % in the equation.
$grid-width: 114rem;
$gutter-vertical: 8rem;
$gutter-horizontal: 6rem;

@mixin clearfix {
  &::after {
    content:  "";
    display: table;
    clear: both;
  }
}

.row {
  max-width: $grid-width;
  background-color: #eee;
  margin: 0 auto;

  &:not(:last-child) {
    margin-bottom: $gutter-vertical;
  }

  @include clearfix;
  // select all the elements with the class attributes starts with 'col-'
  // ^ start with
  // * contain
  // $ end with
  [class^="col-"] {
    color: white;
    height: 5rem;
    font-size: 3rem;
    background-color: orangered;
    float: left;

    &:not(:last-child) {
      margin-right: $gutter-horizontal;
    }
  }

  .col-1-of-2 {
    width: calc((100% - #{$gutter-horizontal}) / 2);
  }

  .col-1-of-3 {
    width: calc((100% - 2 * #{$gutter-horizontal}) / 3);
  }

  .col-1-of-4 {
    width: calc((100% - 3 * #{$gutter-horizontal}) / 4);
  }

  .col-2-of-3 {
    width: calc(2 * ((100% - 2 * #{$gutter-horizontal}) / 3) + #{$gutter-horizontal});
  }

  .col-2-of-4 {
    width: calc(2 * ((100% - 3 * #{$gutter-horizontal}) / 4) + #{$gutter-horizontal});
  }

  .col-3-of-4 {
    width: calc(3 * ((100% - 3 * #{$gutter-horizontal}) / 4) + 2 * #{$gutter-horizontal});
  }
}

How each equation is decided

  • col-1-of-2
    Check the first row. You only have 2 columns and 1 gutter. The width of pure columns is (100% – gutter). Then since there are two columns in the row you need to divide it by 2. The width of a single column is then (100% – gutter) / 2
  • col-1-of-3
    Check the second row. You have 3 columns and 2 gutters. The width of pure columns is (100% – 2 * gutter). Then since there are three columns in the row you need to divide it by 3. The width of a single column is then (100% – 2 * gutter) / 3
  • col-2-of-3
    This one seems to be a bit tricky but it’s actually pretty simple. If you look at row 2, 2-of-3 is actually the sum of two col-1-of-3 and one gutter.
    The width of a single column is then (2 * 2-of-3 + gutter)
  • col-3-of-4
    This is the exact same case as the above. This is the sum of three col-1-of-4 and two gutters.
    The width of a single column is then (3 * 1-of-4 + 2 * gutter)