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 and . Where: row col-{breakpoint}-{number of columns} : 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. {breakpoint} : indicates the number of columns you’d like to use out of the possible 12 per row. {number of columns} 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: : 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. row : the item will take 12 columns by default unless another column class is used. col-0-12 : 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-576-6 : 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-720-4 : 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-1024-3 : 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. col-1200-2 CSS stylesheet 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 . So, I used the to deal with this situation. .row here Easy Clearing Method { : ; : hidden; : block; : ; : both;
} .row ::after content "." visibility display height 0 clear rule has nothing more than the and properties setting in its body. That way we get a fluid-grid behavior. .col-{breakpoints}-{number of columns} float: left width: XX.XX% { : left; : ;
  } { : left; : ;
  } { : left; : ;
  } { : left; : ;
  } { : left; : ;
  } { : left; : ;
  } { : left; : ;
  } { : left; : ;
  } { : left; : ;
  } { : left; : ;
  } { : left; : ;
  } { : left; : ;
  } .col-XXXX-1 float width 8.33% .col-XXXX-2 float width 16.66% .col-XXXX-3 float width 25% .col-XXXX-4 float width 33.33% .col-XXXX-5 float width 41.66% .col-XXXX-6 float width 50% .col-XXXX-7 float width 58.33% .col-XXXX-8 float width 66.66% .col-XXXX-9 float width 75% .col-XXXX-10 float width 83.33% .col-XXXX-11 float width 91.66% .col-XXXX-12 float width 100% To make the grid responsive  I only needed to put the code above inside a media query, replacing with the corresponding breakpoint. For example: XXXX @ screen and (min-width: ) { { : left; : ;
    } { : left; : ;
    } { : left; : ;
    } { : left; : ;
    } { : left; : ;
    } { : left; : ;
    } { : left; : ;
    } { : left; : ;
    } { : left; : ;
    } { : left; : ;
    } { : left; : ;
    } { : left; : ;
    }

} media 576px .col-576-1 float width 8.33% .col-576-2 float width 16.66% .col-576-3 float width 25% .col-576-4 float width 33.33% .col-576-5 float width 41.66% .col-576-6 float width 50% .col-576-7 float width 58.33% .col-576-8 float width 66.66% .col-576-9 float width 75% .col-576-10 float width 83.33% .col-576-11 float width 91.66% .col-576-12 float width 100% Adding gutters I used and 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. padding box-sizing Stylesheet The items ( ) and its container ( ) need to include the size in their width. We achieve this by using the next CSS rule: col-{breakpoints}-{number of columns} row padding * { : border-box;
} box-sizing The next step is to set the and properties in each of the grid items. padding-right padding-top { : ; : ;
} [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 properties to it. padding { : ; : ;
} .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 h ttps://dev.to/fivan18/how-to-build-a-grid-based-framework-using-the-float-property-2chf

Twitter

How to use Publish-Subscribe Pattern with JavaScript

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How to use Publish-Subscribe Pattern with JavaScript

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

How to use Publish-Subscribe Pattern with JavaScript

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps