paint-brush
How to Design a Grid-based Framework Using the CSS Float Propertyby@fivan
121 reads

How to Design a Grid-based Framework Using the CSS Float Property

by Ivan GuzmanMay 28th, 2020
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

The basic grid-based framework uses rows and columns to layout and aligns content. It's a Bootstrap-like framework that uses rows to layout. The main classes to layout the grid are:.rororoand.col-{breakpoint}- {number of columns} The grid is based on minimum width media queries, meaning they apply to that one breakpoint and all those above it. To make the grid responsive I only needed to put the code above a media query, replacingXXXXXXXX with the corresponding breakpoint. For example, I used the Easy Clearing Method.

Company Mentioned

Mention Thumbnail
featured image - How to Design a Grid-based Framework Using the CSS Float Property
Ivan Guzman HackerNoon profile picture

Basic grid-based framework

Look at the example below, it illustrates the use of the framework. I'll explain the code in a minute.

It's a Bootstrap-like framework. It uses rows and columns to layout and aligns content. The main classes to layout the grid are

row 
and
col-{breakpoint}-{number of columns}
. Where:

  • {breakpoint}
    : it's a number that represents the breakpoint in pixels. Grid breakpoints are based on minimum width media queries, meaning they apply to that one breakpoint and all those above it.
  • {number of columns}
    : indicates the number of columns you’d like to use out of the possible 12 per row.

HTML layout

As you saw, the example is basically a grid layout with eight items:

<div class="row well">
  <div class="col-0-12 col-576-6 col-720-4 col-1024-3 col-1200-2">
    <div class="well h"></div>
  </div>
  <div class="col-0-12 col-576-6 col-720-4 col-1024-3 col-1200-2">
    <div class="well h"></div>
  </div>
  <div class="col-0-12 col-576-6 col-720-4 col-1024-3 col-1200-2">
    <div class="well h"></div>
  </div>
  <div class="col-0-12 col-576-6 col-720-4 col-1024-3 col-1200-2">
    <div class="well h"></div>
  </div>
  <div class="col-0-12 col-576-6 col-720-4 col-1024-3 col-1200-2">
    <div class="well h"></div>
  </div>
  <div class="col-0-12 col-576-6 col-720-4 col-1024-3 col-1200-2">
    <div class="well h"></div>
  </div>
  <div class="col-0-12 col-576-6 col-720-4 col-1024-3 col-1200-2">
    <div class="well h"></div>
  </div>
  <div class="col-0-12 col-576-6 col-720-4 col-1024-3 col-1200-2">
    <div class="well h"></div>
  </div>
</div>

Let me explain a little bit about how the classes work in this case:

  • row
    : container of the columns. It is necessary to enclose the columns in a container with this class, I'll explain why later on in the next section.
  • col-0-12
    : the item will take 12 columns by default unless another column class is used.
  • col-576-6
    : the item will take 6 columns when the viewport reaches out 576px and all the breakpoints above it unless another column class with a greater breakpoint is used.
  • col-720-4
    : the item will take 4 columns when the viewport reaches out 720px and all the breakpoints above it unless another column class with a greater breakpoint is used.
  • col-1024-3
    : the item will take 3 columns when the viewport reaches out 1024px and all the breakpoints above it unless another column class with a greater breakpoint is used.
  • col-1200-2
    : the item will take 2 columns when the viewport reaches out 1200px and all the breakpoints above it unless another column class with a greater breakpoint is used.

CSS stylesheet

.row
 is basically the container of the items. Due it has nothing but floated elements, the height of it literally collapses to nothing. You can read a really good explanation here. So, I used the Easy Clearing Method to deal with this situation.

.row::after {
    content: ".";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

.col-{breakpoints}-{number of columns}
 rule has nothing more than the 
float: left
 and 
width: XX.XX%
 properties setting in its body. That way we get a fluid-grid behavior.

  .col-XXXX-1 {
    float: left;
    width: 8.33%;
  }

  .col-XXXX-2 {
    float: left;
    width: 16.66%;
  }

  .col-XXXX-3 {
    float: left;
    width: 25%;
  }

  .col-XXXX-4 {
    float: left;
    width: 33.33%;
  }

  .col-XXXX-5 {
    float: left;
    width: 41.66%;
  }

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

  .col-XXXX-7 {
    float: left;
    width: 58.33%;
  }

  .col-XXXX-8 {
    float: left;
    width: 66.66%;
  }

  .col-XXXX-9 {
    float: left;
    width: 75%;
  }

  .col-XXXX-10 {
    float: left;
    width: 83.33%;
  }

  .col-XXXX-11 {
    float: left;
    width: 91.66%;
  }

  .col-XXXX-12 {
    float: left;
    width: 100%;
  }

To make the grid responsive I only needed to put the code above inside a media query, replacing 

XXXX
 with the corresponding breakpoint. For example:

@media screen and (min-width: 576px) {
    .col-576-1 {
      float: left;
      width: 8.33%;
    }

    .col-576-2 {
      float: left;
      width: 16.66%;
    }

    .col-576-3 {
      float: left;
      width: 25%;
    }

    .col-576-4 {
      float: left;
      width: 33.33%;
    }

    .col-576-5 {
      float: left;
      width: 41.66%;
    }

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

    .col-576-7 {
      float: left;
      width: 58.33%;
    }

    .col-576-8 {
      float: left;
      width: 66.66%;
    }

    .col-576-9 {
      float: left;
      width: 75%;
    }

    .col-576-10 {
      float: left;
      width: 83.33%;
    }

    .col-576-11 {
      float: left;
      width: 91.66%;
    }

    .col-576-12 {
      float: left;
      width: 100%;
    }

}

Adding gutters

I used 

padding
 and 
box-sizing
 properties to add the gutters. Let's take a look at the next example, it's almost the same as the example above with some rules added in the stylesheet.

Stylesheet

The items (

col-{breakpoints}-{number of columns}
) and its container (
row
) need to include the 
padding 
size in their width. We achieve this by using the next CSS rule:

* {
  box-sizing: border-box;
}

The next step is to set the 

padding-right
 and 
padding-top
 properties in each of the grid items.

[class*="col-"] {
  padding-right: 20px;
  padding-top: 20px;
}

Finally, to include the gutters that are missing on the left and bottom of the container we set the corresponding 

padding
 properties to it.

.row {
  padding-left: 20px;
  padding-bottom: 20px;
}

And that's it. :)

Let's connect on LinkedIn

Follow me on Twitter | Github

Featured Image: Wall in Chiang Mai enclosing a car park by Andrew Schultz

Previously published at https://dev.to/fivan18/how-to-build-a-grid-based-framework-using-the-float-property-2chf