This project shows the mechanics of creating a grid system using the CSS float property, supplemented by the ‘clearfix hack.’ While the float property was traditionally used for constructing web layouts before the advent of the flex and grid CSS layout modules, it was not originally designed for this purpose.

Despite its common use, relying on the float property for organizing layout elements often resulted in undesirable behaviors, most notably the collapse of the parent container containing ‘floating’ children. To address this issue, the ‘clearfix hack’ was implemented as a solution.

The grid is based on 12 columns in a row.

<div class="grid-container">
  <div class="row">
   <div class="column-n">Column</div>
   <div class="column-n">Column</div>
  </div>
</div>

n – the number of column-elements (form 1 to 12. The sum must be 12)

<div class="grid-container">
  <div class="row">
   <div class="column-6">Column</div>
   <div class="column-6">Column</div>
  </div>
</div>

The column width is determined as a multiple of the width of the column element (column-1).

[class*="column-"] {
  float:left;
}
.column-1 {
  width: calc(100%/12); /* 8.3333333333%; */
}
.column-6 {
  width: width: 50%; /* 6 * 8.3333333333%; */
}

SCSS

@mixin column_width($number) {
  $column-1-width: math.div(100%, 12);
  width: $number * $column-1-width;
}
.column {
  @for $i from 1 through 12 {
    &-#{$i} {
      @include column_width($i);
    }
  }
}

clearfix

To prevent collapse of parent element that contain floating children the parent (row) must have fix commonly known as clearfix:

.clearfix::before,
.clearfix::after {
  display: table;
  content: "";
}
.clearfix::after {
  clear: both;
}

<div class="grid-container">
  <div class="row">
    <div class="column-1">1 Column</div>
    <div class="column-1">2 Column</div>
    <div class="column-1">3 Column</div>
    <div class="column-1">4 Column</div>
    <div class="column-1">5 Column</div>
    <div class="column-1">6 Column</div>
    <div class="column-1">7 Column</div>
    <div class="column-1">8 Column</div>
    <div class="column-1">9 Column</div>
    <div class="column-1">10 Column</div>
    <div class="column-1">11 Column</div>
    <div class="column-1">12 Column</div>
  </div>
</div>

.column-1 {
  float: left;
  width: 8.3333333333%;
}

<div class="grid-container">
  <div class="row">
    <div class="column-6">1 Column</div>
    <div class="column-6">2 Column</div>
  </div>
</div>

.column-6 {
  float: left;
  width: 50%;
}

<div class="grid-container">
  <div class="row">
    <div class="column-2">1 Column</div>
    <div class="column-2">2 Column</div>
    <div class="column-2">3 Column</div>
    <div class="column-2">4 Column</div>
    <div class="column-2">5 Column</div>
    <div class="column-2">6 Column</div>
  </div>
</div>

.column-2 {
  float: left;
  width: 16.6666666667%;
}