make responsive css grid from scratch

How To Make Your Own Responsive CSS Grid From Scratch

Ben by

In this tutorial you will learn how to make your own responsive CSS framework from scratch.

CSS Frameworks are now super popular, and it’s no surprise considering they make developing for mobile device a lot easier.

But the problem with many of the CSS frameworks available today is that they’re full of extra bloat that you really don’t need.

Sure you could use a lightweight framework, but where’s the fun in that? Why not make your own?

In this post I will be explaining the method behind responsive frameworks, how they work and importantly, how you can make your own.

Download Source

What is a Responsive Grid

At it’s simplest, a responsive grid is a set of CSS elements you can use to organize your content that will adapt to fit the screen that they’re being viewed on.

Way back in the good ol’ days of the web, people just used HTML tables to structure their webpages.

This kinda worked back when anyone visiting your site was on a desktop. Nowadays, not so much.

More than 60% of web traffic now comes from mobile (and it’s only growing) which means your pages need to render properly all devices, not just desktops.

You’ve seen it before, web pages that look like this:

non-responsive-web-design

You can guess which one is responsive and which one isn’t.

And think to yourself, which site would you rather visit?

Before We Start

Before we dive head first into writing some CSS, there are a few things that you’ll need before we can start.

First I’m going to assume that you’ve got a basic working knowledge of HTML and CSS, that you’re comfortable messing around with stylesheets and that you’ve used a responsive framework before.

But it’s not a requirement.

I’d also recommend using a browser like Chrome or Firefox so that you can use developer tools to make changes live.

If you’re comfortable dabbling with some CSS, then read on!

Box Sizing

The first thing we’ll do is set the box sizing property for all elements to border box.

This will make the padding and border be included in the total width and height of the element.

Paste the following into your CSS file:

* {
    box-sizing: border-box;
}

Usually when working with html elements, the padding and border are added on afterwards and are not taken into account in the total width and height of the element.

Box sizing is a new property in CSS 3 that let’s us work around that by including the padding and border within the width and height.

The Container

Now we can start working on the next part, our container.

If we started adding elements to the page they would all end up on the far left hand side. Not quite what we want.

To fix that, we need a container that we can put everything in and the float in the middle of our page.

If you have a look at the image below, you can see what our container will look like:

container-example2

As you can see, all of our page elements are going to live inside our container, the margins either side will keep our container aligned in the centre of the page.

We’ll take a look at the CSS for our container:

.container {
	max-width: 1140px;
	margin-left: auto;
	margin-right: auto;
}

First we give the container a max width of 1140px, the container can scale up or down, but cannot exceed a max width of 1140px.

Then we set the margin left and margin right to auto, this will automatically adjust both margins so that our container sits in the middle.

Columns

Now that we’ve got a container, we can start building up our basic grid.

The key building blocks of our grid are going to be columns.

These nifty little elements will help us in structuring our pages.

Let’s take a look at the CSS for our columns:

.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }

Here we’ll define 12 columns each with a set width.

Notice that we’re using percentages rather than pixels, so that each column will scale based on screen size rather than be a fixed size.

To work out how wide each columns should be, we’ll just use some quick maths:

100% / 12 columns = 8.33%

Armed width our column size, we can then work out the sizes for all of the other columns.

We still need to add a few extra properties to our columns. Rather than copying them for each column, we’ll just use a wildcard:

[class*="col-"] {
    float: left;
    padding: 15px;
    background: #e4e4e4;
}

All of the properties that we diefine with this wildcard will get applied to all classes that start with “col-“.

We set all of our a columns to float to the left and give them a little padding.

Finally I’ve just added a light background color so that we can see the columns on the page. You can remove this later.

Rows

Now we’ve got ourselves some columns, which should give our page a little more structure.

But if we just start adding columns you’ll find that they end up all over the page.

That’s where rows come in. Rows are like mini containers that will hold our columns horizontally and keep them in place.

If you take a look at the picture below, you’ll see how the rows will hold the columns on our page:

example row css

Let’s take a look at the CSS behind our rows:

.row {
	margin-bottom: 25px;
}

.row::after {
    content: "";
    clear: both;
    display: block;
}

In the first class I’ve just added a small bottom margin to separate our rows so that they don’t all end up clumped together.

The main styling for our rows lives in the second part.

Because we set all of our columns to float to the left, they will will float independently from the div that they’re inside of.

When put our columns inside the row, the columns will float to the left and our row will collapse as if there wasn’t anything inside it.

To fix this, we first add some content to the row to stop it from collapsing.

The clear property then stops other floating elements from appearing on either the left or right side of the row.

Finally, the display property lets us set the row to display as a solid block rather than display inline with other elements.

Setting up the Page

At this point, we’ve got the basics of a responsive grid and we can start building up our page.

For this tutorial we’ll use a super simple template to show off our fancy responsive grid.

Open up your HTML file and paste in the following:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Responsive Grid</title>

  <link rel="stylesheet" href="style.css">

</head>

<body>
  
  <div class="container">
  
	<div class="row">
	
		<div class="col-6">
			<p><img src="trees.jpg"/></p>
		</div>
		<div class="col-6">
			<h1>This is a heading</h1>
			<p>And here is some dummy text. Yay dummy text!</p>
		</div>
	
	</div>
  
  <div class="row">
	
	<div class="col-1">
		<p>Column 1</p>
	</div>
	<div class="col-1">
		<p>Column 1</p>
	</div>
	<div class="col-1">
		<p>Column 1</p>
	</div>
	<div class="col-1">
		<p>Column 1</p>
	</div>
	<div class="col-1">
		<p>Column 1</p>
	</div>
	<div class="col-1">
		<p>Column 1</p>
	</div>
	<div class="col-1">
		<p>Column 1</p>
	</div>
	<div class="col-1">
		<p>Column 1</p>
	</div>
	<div class="col-1">
		<p>Column 1</p>
	</div>
	<div class="col-1">
		<p>Column 1</p>
	</div>
	<div class="col-1">
		<p>Column 1</p>
	</div>
	<div class="col-1">
		<p>Column 1</p>
	</div>
	
  </div>
  
  </div>
  
</body>
</html>

Remember to replace the stylesheet to the path/URL of your stylesheet and pick a nice image to use in our main column.

Fire it up and we’ve got a basic responsive page, not bad for a few minutes work!

Media Queries & Breakpoints

Our responsive grid is almost complete and on a desktop it’s already starting to look fancy (ignoring the terrible fonts!).

But if we resize the screen down to a mobile, it doesn’t look so great.

To make our responsive grid look great on a mobile, we’ll need to use media queries.

Media queries let us set specific breakpoints where the CSS will change based on the browsers screen size.

We’re going to have 3 main breakpoints for our grid:

  • Mobile – For screens smaller than 600px wide
  • Tablet – For screens 600px to 780px
  • Desktop – For screen larger than 780px

Let’s look at the CSS for our first breakpoint:

[class*="col-"] {
    width: 100%;
}

Since this is the smallest breakpoint, we’ll add this as a default styling and override it later for our other breakpoints.

To get everything to display properly on mobile, each column really needs to be set to the full width of page, which we do with the width property.

We’ll then add our second breakpoint for tablets:

@media only screen and (min-width: 600px) {
    .col-m-1 { width: 8.33%; }
    .col-m-2 { width: 16.66%; }
    .col-m-3 { width: 25%; }
    .col-m-4 { width: 33.33%; }
    .col-m-5 { width: 41.66%; }
    .col-m-6 { width: 50%; }
    .col-m-7 { width: 58.33%; }
    .col-m-8 { width: 66.66%; }
    .col-m-9 { width: 75%; }
    .col-m-10 { width: 83.33%; }
    .col-m-11 { width: 91.66%; }
    .col-m-12 { width: 100%; }
}

You can see here that we’re using an @media query to apply this styling when the screen is a minimum of 600px wide.

You’ll also notice that the columns are named “col-m” rather than just “col-“, I’ll explain why we’ve done this in a minute.

Finally we add our third breakpoint for desktops:

@media only screen and (min-width: 768px) {
    .col-1 { width: 8.33%; }
    .col-2 { width: 16.66%; }
    .col-3 { width: 25%; }
    .col-4 { width: 33.33%; }
    .col-5 { width: 41.66%; }
    .col-6 { width: 50%; }
    .col-7 { width: 58.33%; }
    .col-8 { width: 66.66%; }
    .col-9 { width: 75%; }
    .col-10 { width: 83.33%; }
    .col-11 { width: 91.66%; }
    .col-12 { width: 100%; }
}

It might seem a bit strange that we’ve added two sets of almost identical classes.

You could have just one set “col-“, but by adding a different class of columns for our breakpoint it gives us a lot more control over how those columns are displayed for tablets.

You’ll now want to go back and add our breakpoint columns to your HTML.

You’re columns should look like this:

<div class="row">
	
		<div class="col-6 col-m-6">
			<p><img src="trees.jpg"/></p>
		</div>
		<div class="col-6 col-m-6">
			<h1>This is a heading</h1>
			<p>And here is some dummy text. Yay dummy text!</p>
		</div>
	
</div>

Images

Our responsive grid is finally finished, but you’ll find that our images are anything but responsive.

The most simple and effective way to make your image responsive, is to fill them to the size of the container and then adjust the height accordingly.

img {
    width: 100%;
    height: auto;
}

There are a few things to note with this method:

  • To avoid streching, an image’s container should never be larger than the image itself.
  • To avoid wasting bandwidth, an image should never be larger than the container that it’s in.

It’s that simple.

Adding Some Styling

Unfortunately are awesome responsive grid doesn’t look that great with everything in times new roman.

ugly styling example css

Let’s brighten things up a little with some basic styling:

body{
 font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
 color: #333;
}

It’s certainly not going to win any awards, but it’s got to be better than boring old time new roman right?

We’ll also get rid of the column background we added earlier, go back and remove the background property for your column wildcard:

[class*="col-"] {
    float: left;
    padding: 15px;
    background: #e4e4e4;
}

That ought to make our grid look a little more appealing, let’s take a look shall we?

pretty styling example css

And there you are, our simple responsive grid is now complete and you can start building your own responsive pages.

 

Hopefully this should give you a brief overview of how responsive design works and if you’ve followed this tutorial all the way through, then you should have your very own responsive grid.

In our next article we’ll explain some key principle of responsive design and how you can start developing with mobile in mind.

For now though, you can put your feet up.

 

If you found this tutorial useful then we’d love to know which topics you’d like to learn more about, let us know in the comments!

You may also like

  • I have been looking to create my own “responsive” css platform, something that I can use for my own personal projects and maybe possibly share with anyone interested. So I did a search and have been looking at many, many different tutorials when I came across yours.

    I have to say that the way you explained it was awesome! You made everything make sense and presented it in a easy to understand way. Thanks, I greatly appreciate the time and effort you put into this. You did a wonderful job.

    • Ben

      Thanks for the great feedback Thomas!

  • Marcel Epp

    Hi Ben,

    i came across this article and downloaded the source code. It seems that chrome doesn’t scale when u use the tablet view. I added in the header of the html file. Now it looks good when i use the tablet size in chrome. Maybe you can try it too. 😉

    • Ben

      Hi Marcel thanks for the heads up!

      I’ll add this in as a correction 🙂