Creating a simple mobile-first grid system
I used to cringe when students asked me how to build a mobile responsive grid from scratch. I had two options: (a) pretend I didn’t hear the question and continue livin’ life happily or (b) use my go-to response, which was “just add Bootstrap or Foundation to your project.” But let’s face it… we shouldn’t be importing a whole new library to address a small need. So, in this article I’ll discuss the two types of grid fluidities, and how to quickly create a simple grid of your own.
*Note: Only HTML & CSS were used to avoid complexity for first timers.
Responsive vs. adaptive grids
Put simply, a responsive grid system smoothly responds to the browsers viewport width at any given size. An adaptive grid system snaps and adapts itself based on specific viewport widths.
For more information on this subject I recommend reading CSS Trick’s post on the difference between responsive and adaptive design. For this post we’ll focus on responsive grids.
Building your first responsive grid
The first thing we want to do is create our grid row. Our `.rows` will contain our columns. We also need to add a clearfix to avoid elements from collapsing onto themselves when there are child elements inside.
// CSS
.row { position: relative; }.row::after {
content: "";
display: block;
clear: both;
}
Second, we want to add our responsive widths for our columns. We’ll be creating a 10 column grid. To get your percentage widths, divide the current number of columns by your total number of columns and multiply your result by 100. For example: (1/10) * 100 = 10%.
// CSS
.col {
width: 100%;
float: left;
}.col-1 { width: 10%; }
.col-2 { width: 20%; }
.col-3 { width: 30%; }
.col-4 { width: 40%; }
.col-5 { width: 50%; }
.col-6 { width: 60%; }
.col-7 { width: 70%; }
.col-8 { width: 80%; }
.col-9 { width: 90%; }
.col-10 { width: 100%; }
*Note: I chose to build a 10 column grid to allow for easy math and avoid confusion. A popular size for total number of columns is 12.
Integrating breakpoints to your grid system
Now that you understand how to build your columns we need to add breakpoints. This is is really where a responsive grid system comes to life. Breakpoints allow your content to be re-organized based on predefined points. We’ll use breakpoints to create different layouts for small, medium or large devices.
We’ll be making modifications to our previous code to accommodate our breakpoints. To add a breakpoint you will have to define a media query for each device size.
// CSS
.col {
width: 100%;
float: left;
}/* Small Devices */
@media (min-width: 576px) {
.sm-1 { width: 10%; }
.sm-2 { width: 20%; }
.sm-3 { width: 30%; }
.sm-4 { width: 40%; }
.sm-5 { width: 50%; }
.sm-6 { width: 60%; }
.sm-7 { width: 70%; }
.sm-8 { width: 80%; }
.sm-9 { width: 90%; }
.sm-10 { width: 100%; }
}/* Medium Devices */
@media (min-width: 768px) {
.md-1 { width: 10%; }
.md-2 { width: 20%; }
.md-3 { width: 30%; }
.md-4 { width: 40%; }
.md-5 { width: 50%; }
.md-6 { width: 60%; }
.md-7 { width: 70%; }
.md-8 { width: 80%; }
.md-9 { width: 90%; }
.md-10 { width: 100%; }
}/* Large Devices */
@media (min-width: 992px) {
.lg-1 { width: 10%; }
.lg-2 { width: 20%; }
.lg-3 { width: 30%; }
.lg-4 { width: 40%; }
.lg-5 { width: 50%; }
.lg-6 { width: 60%; }
.lg-7 { width: 70%; }
.lg-8 { width: 80%; }
.lg-9 { width: 90%; }
.lg-10 { width: 100%; }
}
*Note: You can use any size for your media queries. I chose to follow common sizes popularized by Bootstrap.
Adding space between columns
We can also add space inside our columns, known as gutters, to avoid having content edge-to-edge. We’ll start by making changes to the default box model, so the addition of padding or borders doesn’t break our grid.
// CSS
html { box-sizing: border-box; }*,
*:before,
*:after { box-sizing: inherit; }
And we’ll follow that by adding padding to our columns
// CSS
.col {
width: 100%;
float: left;
padding-left: 15px;
padding-right: 15px;
}Note: Your gutters can be any size. Just make sure it’s even on both sides.
Final thoughts
And there you go!!! We now understand the difference between responsive and adaptive grids. We built a simple responsive grid system without too much hassle. Pretty straight forward, right? Below is the final code.
/* Prevents Padding or borders from changing box size */
html { box-sizing: border-box; }
*,
*:before,
*:after { box-sizing: inherit; }.row { position: relative; }.row::after {
content: "";
display: block;
clear: both;
}/* Columns */
.col {
width: 100%;
float: left;
padding-left: 15px;
padding-right: 15px;
}/* Small Devices */
@media (min-width: 576px) {
.sm-1 { width: 10%; }
.sm-2 { width: 20%; }
.sm-3 { width: 30%; }
.sm-4 { width: 40%; }
.sm-5 { width: 50%; }
.sm-6 { width: 60%; }
.sm-7 { width: 70%; }
.sm-8 { width: 80%; }
.sm-9 { width: 90%; }
.sm-10 { width: 100%; }
}/* Medium Devices */
@media (min-width: 768px) {
.md-1 { width: 10%; }
.md-2 { width: 20%; }
.md-3 { width: 30%; }
.md-4 { width: 40%; }
.md-5 { width: 50%; }
.md-6 { width: 60%; }
.md-7 { width: 70%; }
.md-8 { width: 80%; }
.md-9 { width: 90%; }
.md-10 { width: 100%; }
}/* Large Devices */
@media (min-width: 992px) {
.lg-1 { width: 10%; }
.lg-2 { width: 20%; }
.lg-3 { width: 30%; }
.lg-4 { width: 40%; }
.lg-5 { width: 50%; }
.lg-6 { width: 60%; }
.lg-7 { width: 70%; }
.lg-8 { width: 80%; }
.lg-9 { width: 90%; }
.lg-10 { width: 100%; }
}
Example responsive website
In case you were wondering what an actual project using our grid would look like, I’ve also linked an example. Enjoy!
