How do float-based grids works?

The key to writing a responsive, float-based grid is developing and understanding the inter-relationships between the 2 following containing block structures and their properties:

Initial grid context,
CSS classes devoted to defining column widths within the former element, and
Understanding 'float' property behavior and some ways to make 'float' work for you (clear-fixes + box-sizing)

Creating the grid context

Grid context screen cap from css-tricks.com

Write a wrapper <div> element with a class named .grid (as seen in the picture):

<div class="grid">
  
  <!-- 100% wide -->

</div>

Remember that the .grid containing block is a child of the <body> containing block, so it inherits its auto-calculated width of 100%.

Creating the grid columns in HTML

In the HTML file, write a testable combination of columns within the containing block .grid. The example below creates a content block with a sidebar to its right (as seen in the picture):

<!-- Grid + Columns -->
        
<div class="grid">

  <div class="col-1-4">
     Image Container
  </div>
  
  <div class="col-3-4">
     Written Content
  </div>
  
</div>

The class names correspond to the desired output goal to divide the containing block context into columns.

Defining the column widths in CSS

In your CSS file, divide up your 100% grid context by writing classes to create your desired column widths.

.col-3-4 {
  width: 75%;
}
.col-2-3 {
  width: 66.66%;
}
.col-1-2 {
  width: 50%;
}
.col-1-3 {
  width: 33.33%;
}
.col-1-4 {
  width: 25%;
}

Even after you have defined these column widths and represented them in your HTML, the normal flow of elements stacks these div blocks on each other (as seen in the picture).

Float all of the column <div> containers

In order for the columns to assemble in rows, write a regular expression selector to float all of the column classes:

[class*='col-'] {

  float: left;

}

The regular expression selector, as shown in the previous example, searches for any class that begins with 'col-'. This should tell you how important naming and developing naming schemes is during the design process.

As seen in the picture, your rendered page looks quite messy. The page is messy because the parent containing block, .grid, is being told to allow the floating of adjacent elements—not the desired children elements with a class that starts with '.col-'. Check out this problem by insepecting the elements in relationship to each other.

Applying the clear-fix hack

The clear-fix hack

A hack has been popularized to extend the float behavior to children elements, too. It is called the clear-fix hack:

.grid:after {
  content: "";
  display: table;
  clear: both;
}

Making those column-children images behave

Based on the configuration now, the children div elements should all conform and fit inside the parent .grid element. Yet, the images provided in this tutorial are different sizes, so the images break out of their containing blocks. Fix this by applying CSS to the targeted elements within the grid as follows:

.col-1-4 img,
.col-3-4 img {
  width: 100%;
}

Now, all of the children of the referenced col- divs will conform to the total width of its column containing block (see the picture).

Padding and the box-sizing solution

The grid needs some whitespace. Yet, if you add any margins or borders to the children elements within the grid containing block, the grid will break, since those values add to the 100% value of the columns within the grid context. Luckily, the CSS property box-sizing solves this problem by subtracting those values. Here's how to apply it:

/*

   1. Add padding/whitespace to 
      the columns and the modules.
      
 */
[class*='col-'] {
  float: left;
  padding-right: 10px;
  margin-top: 10px;
}

.module {
  /* adds 10px to all sides */
  padding: 10px;
  /* centers the module */
  height:auto;
}

/*

   2. Add the box-sizing: border-box
      declaration to solve the problem
      of additional values to the boxes.
      
 */
 * {
  box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

Add color schemes with the nth-child() pseudo-class

Add some color with the nth-child() pseudo-class. **Note where the HTML classes are placed in relation to the CSS written below:

.bg-color:nth-child(odd) {
  background-color: #62B1D0;
}
.bg-color:nth-child(even) {
  background-color: #63DC90;
}

Adaptive design technique with `@media` queries

The images and containers are indeed responsive. Yet, the images shrink to unusable sizes past a particular width. To solve this problem, apply new, semantic classes to the left and right containers, so you can apply a @media query to tell the page to render each parent column as 100% width between 0px and 800px:

@media (min-width: 0px) and (max-width: 800px) {
  .right-text-container {width: 100%;}
  .left-img-container {width: 100%;}
}

Review of items covered

A list of grid-items covered:

Parent grid context
Children columns + modules that inherit col- properties
Float behavior
The clear-fix hack
Box-sizing
Adding some color with nth-child() pseudo-classes
Small, but effective, adaptive design decision with a @media query