sia.hackernoon.com

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

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