fivan18

Posted on Jan 29, 2020 • Edited on Jan 31, 2020

How to build a Grid-based framework using the float property

fivan18 / grid-based-framework

This is a Bootstrap-like framework grid system. Built with CSS using the float technique and media queries.

Grid-based-framework

The framework's grid system uses rows and columns to layout content, it’s built with the float technique and uses media queries to gracefully degrade the site as the window size is reduced.

It works like Twitter's Bootstrap framework with a litle difference: the breack points (col-breakPoint-cellsPerItem)

col-0-4
col-576-4
col-720-4
col-1024-4
col-1200-4

Live Demo

https://fivan18.github.io/grid-based-framework/

Page that is using the framework

Getting Started

Download framework.css and framework.js files
Add framework.css and framework.js files to your project
Add a link tag inside the head that reference the framework.css file (like this)
Add two scritp tags rigth before the body-close tag (like this)
1. Set the src property of the first one to reference the framework.js file
2. Add this code to the second one
```
    function resize() {
        /*
            The code that you will put here will depend on the classes that
            you are using and the
```
  …

View on GitHub

As part of the fast track program at Microverse I started to learn HTML and CSS by cloning some pages. There was a project I learned about positioning and floating elements, it was no easy but approachable. In the subsequent projects, I decided to use the floating technique to position elements because that way I got a strong foundation of float property.

The grid-based framework was one of those HTML and CSS's projects, it was actually the last one of this course.

Well, I know that there are different techniques to position elements nowadays like Flexbox but I struggled the most using float property, that's why I decided to use it to build this project.

How to build the grid-based framework

To figure out how to build the framework it was easier to use it in one of the projects that I worked with. So I chose the TNW clone. It gave me the guideline.

The next step was to refresh my knowledge about float and grids. These were the articles on which I relied:

All About Floats by Chris Coyer
Don't Overthink It Grids by Chris Coyer
Fluid Grids by Ethan Marcotte

Sections to be built with the framework

The TNW page has 5 sections with a similar behavior: each contains similar items that resize accordingly with the viewport (fluid grid) and expand in different proportions when the viewport reaches out a specific size (responsive design). Let's give it an example:

The Latest news section has 8 similar items.

When we resize the viewport, the size of each item will change according to it.

If we reach out 1024 pixels (breakpoint), instead of four items per row it'll be 3 items per row (they expand in different proportions).

Having all those things in mind I started to build the framework that fits my requirements. I thought about Bootstrap's Grid System and how easy it could be to clone the page using it. So, I decided to build a Bootstrap-like grid framework.

Basic grid-based framework

Look at the code below and try to understand it. It illustrates the use of the grid-based framework. You can change the viewport size by clicking on the buttons that are at the bottom middle of the CodePen tool. The ones that have the next labels: 1x, 0.5x and 0.25x.

As I said, 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 six 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>

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 article.
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, we use 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 we only need 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.

Conclusion

Well, this is a basic explanation to build a grid-based framework using the float property. It helped a lot to understand this technique to position elements.

In the example that I illustrated, the items in the grid have the same height value and it works really well. But, what if we have different values for each item? Yes, there is a problem when it happens. There is a peculiar behavior with the floating elements that cause the grid layout breaks. I'll explain it in another article and the way how I solved it.

To be continued...

DEV Community