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

Author profile picture

@fivanIvan Guzman

Mechatronic Engineer | Full-stack Developer

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

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

Comments

Tags

The Noonification banner

Subscribe to get your daily round-up of top tech stories!

read original article here