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