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