Float Layout Grid

float-layout-grid.markdown

Float Layout Grid

Float grid from Udemy course

A Pen by Ramunas on CodePen.

License.

index.html

<!-- Example: col-1-of-3 = One part of three part grid -->

<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>

  <div class="row ">
    <div class="col-1-of-5 color-blue">
      Col 1 of 5
    </div>
    <div class="col-1-of-5 color-blue">
      Col 1 of 5
    </div>
    <div class="col-1-of-5 color-blue">
      Col 1 of 5
    </div>
    <div class="col-1-of-5 color-blue">
      Col 1 of 5
    </div>
    <div class="col-1-of-5 color-blue">
      Col 1 of 5
    </div>
  </div>

  <!--  Expeimental -->

</section>

style.scss

// GRID
$grid-width: 1140px;
$gutter-vertical: 80px;
$gutter-horizontal: 10px;

//COLOR
$yellow: oranage;

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

.color-blue {
  color: white;
  background-color: blue !important;
}
.color-yellow {
  color: grey;
  background-color: yellow !important;
}
.grid-test {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4"%3E%3Cpath fill="%239C92AC" fill-opacity="0.4" d="M1 3h1v1H1V3zm2-2h1v1H3V1z"%3E%3C/path%3E%3C/svg%3E');

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

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

    @include clearfix;

    [class^="col-"] {
      float: left;
      background-color: orangered;
      color: white;

      &: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-2-of-3 {
      width: calc(
        2 * ((100% - 2 * #{$gutter-horizontal}) / 3) + #{$gutter-horizontal}
      );
    }

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

    .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}
      );
    }
    
    .col-1-of-5{
      width: calc((100% - 4 * #{$gutter-horizontal}) / 5);
    }
  }
}