So we all know the free responsive frameworks you can get out there and they are great! But they can be full of lots of code you will never use, so why not code your own basic responsive grid? It is easy and I will show you how.
Even if it is just to get a better understanding of how the frameworks work and for a better understanding of responsive web design this is a great exercise.
There are 2 approaches I will go through in this article, one is to create a truly responsive grid with all margins etc using percentages so it all scales down together. The second is to use a fixed padding approach so all columns and panels etc have the same spacing even when you reduce the screen size. The latter is my personal preference as I come form a design background I like to maintain my spacing and give content room to “breath”.
For this article I will be using the commonly used 12 column grid.I will make one breakpoint as well just to keep it nice and simple for you all, who knows that might be all you need anyway! That breakpint will shift to a 6 column mobile grid.
Start To Set Up Your Grid
Let’s say you would like the max width of your site to be 980px and the gutter inbetween columns to be around 5px this roughly translates to around 0.25%. We get that from the equation 980 / 100 * 5 = 0.5% then where we will need to put this on either side of our columns we half it to 0.25% so that when our columns are together that doubles up to 0.5%. We will need to apply this to both our desktop layout and our layout after we hit our breakpoint which will call our mobile layout. To let the columns know when they need to break and to give us more flexibility we will use 2 classes. One called dektop-(number of columns you want it to take up) and mobile-(number of columns you want it to take up on mobile). This is so you could have 4 panels taking up 3 columns each on desktop (desktop-3) but then you want them to be halves on mobile (mobile-3) and in another section again you have 4 panels taking up 3 columns but then on mobile you want them to shift to full width strips (mobile-6). By using them classes we can achieve the 2 options. If we just used one set of classes for example “col-3” then just adjust that one class at our breakpoint we could only ever have our columns do one shift in layout instead of having the options of them becoming half, full etc. If you also added a tablet breakpoint if needed you could have three shifts by adding a tablet-(number of columns on tablet) class.
To get that margin across both sets we can use this:
[class*="desktop-"],
[class*="mobile-"] {
float: left;
margin-left: 0.25%;
margin-right: 0.25%;
margin-bottom: 1%;
}
I have just added a margin bottom of 0.5% again to maintain space and obviously floated them all left as we will need them to float next to each other.
Now it is time to set up each column width. We use a simple formula of column amount / 12 * 100 = result %.
Let’s start with 1 column:
1 / 12 = 0.0833333333333333
0.0833333333333333 * 100 = 8.333333333333333%
But we also need to remember our margin space either side so we deduct 0.5 resulting in 7.833333333333333%. Then we just need to do that for each column up until 12, this should be your CSS:
.desktop-1 {
width: 7.83333%;
}
.desktop-2 {
width: 16.1667%;
}
.desktop-3 {
width: 24.5%;
}
.desktop-4 {
width: 32.8333%;
}
.desktop-5 {
width: 41.1667%;
}
.desktop-6 {
width: 49.5%;
}
.desktop-7 {
width: 57.8333%;
}
.desktop-8 {
width: 66.1667%;
}
.desktop-9 {
width: 74.5%;
}
.desktop-10 {
width: 82.8333%;
}
.desktop-11 {
width: 91.1667%;
}
.desktop-12 {
width: 99.5%;
}
With some layouts you might want these columns to sit side by side with no margin at all. let’s say you need thirds and two thirds to sit side by side sometimes and 2 halves to sit side by side as well, for that we would have these styles:
.full-half {
margin-left: 0;
margin-right: 0;
width: 50%;
}
.full-third {
margin-left: 0;
margin-right: 0;
width: 33.33%;
}
.full-two-third {
margin-left: 0;
margin-right: 0;
width: 66.66%;
}
Then that is your basic desktop grid, now for when you want it to shift to a “mobile” layout. Let’s use the breakpoint of 739px for that and I don’t think we would ever really use less than thirds on a mobile screen so we only need a mobile-2 (third), mobile-3 (half), mobile-4 (two-thirds) and a mobile-6 (full). As we drop it to 6 column grid. So our formula slightly changes, we now use 2 / 6 * 100 – margin = desired width.
For a third we do this:
2 / 6 = 0.3333333333333333
0.3333333333333333 * 100 = 33.33333333333333
33.33333333333333 – 0.5 = 32.83333333333333%
So our mobile columns CSS would be:
@media screen and (max-width: 739px) {
.mobile-2 {
width: 32.83333333333333%;
}
.mobile-3 {
width: 49.5%;
}
.mobile-4 {
width: 66.16666666666667%;
}
.mobile-6 {
width: 99.5%;
}
}
That is about that for version 1! you can view and use this file if you want to use or inspect that grid.
Responsive grid with set padding gutters.
Now onto my preferred version. One becuase I come from a design background and like consistent space but second it is so much easier to get the columns widths set out. We do not have to worry about choosing a percentage margin which makes our formula a lot easier and out percentage numbers a lot nicer rather than all them decimal numbers.
First off we need to use box-sizing: border-box; if you do not know what this is, it means that when we set a width, that element stays that width, despite padding or borders being applied. Otherwise we would have to use a percentage padding and figure that out all again bblleuurrgghh. You can set the box sizing like this:
[class*="desktop-"], [class*="mobile-"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Again we will want to apply the same padding across all the columns and float them, still remember the padding will double in between columns:
[class*="desktop-"], [class*="mobile-"] {
webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
padding: 0 5px 10px;
}
Then it is the same process as before setting out each column width but all we have to do for this grid is this formula, column amount / 12 * 100 = result %. Which resilts in these column widths:
.desktop-1 {
width: 8.33%;
}
.desktop-2 {
width: 16.66%;
}
.desktop-3 {
width: 25%;
}
.desktop-4 {
width: 33.33%;
}
.desktop-5 {
width: 41.66%;
}
.desktop-6 {
width: 50%;
}
.desktop-7 {
width: 58.33%;
}
.desktop-8 {
width: 66.66%;
}
.desktop-9 {
width: 75%;
}
.desktop-10 {
width: 83.33%;
}
.desktop-11 {
width: 91.66%;
}
.desktop-12 {
width: 100%;
}
.full {
padding: 0 0 10px;
}
.full-left {
padding: 0 5px 10px 0;
}
.full-right {
padding: 0 0 10px 5px;
}
.full-height {
padding-bottom: 0;
}
As you may have noticed I also added on some “full” styles in case you ever needed your columns to sit side by side or take up the entire width or height.
Now for mobile we do the same as version 1 but again without deducting the margin as we don’t have one. What I usually do for mobile though is take the padding down a bit as I think 10px can be a bit sparce sometimes, but of course this is completely up to you. What I would have is the following:
@media screen and (max-width: 739px) {
[class*="mobile-"] {
padding: 0 3px 6px;
}
.mobile-2 {
width: 33.33%;
}
.mobile-3 {
width: 50%;
}
.mobile-4 {
width: 66.66%;
}
.mobile-6 {
width: 100%;
}
.full {
padding: 0 0 6px;
}
.full-left {
padding: 0 3px 6px 0;
}
.full-right {
padding: 0 0 6px 3px;
}
.full-height {
padding-bottom: 0;
}
}
Then that is about it! Of course the decision of which version you prefer or works best for you is up to you. The same as the column grid you use etc etc, but this should show you the basis of how you would set it up and the formulas used.
The responsive grid with padding gutters can be viewed and used here.