Image for post
Image for post
Image courtesy of META+LAB

Creating a simple mobile-first grid system

Alex Hernandez
Jan 26, 2018 · 5 min read

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.

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

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

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

And we’ll follow that by adding padding to our columns

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.

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!

META+LAB

As part of the educational process, we employ high-impact…

Alex Hernandez

Written by

I push buttons & ship code @activision

META+LAB

META+LAB

As part of the educational process, we employ high-impact practices to reinforce and extend the curriculum. Students take a leadership role within the organization and are expected to work in a team setting to come up with solutions to the projects they are assigned.

Alex Hernandez

Written by

I push buttons & ship code @activision

META+LAB

META+LAB

As part of the educational process, we employ high-impact practices to reinforce and extend the curriculum. Students take a leadership role within the organization and are expected to work in a team setting to come up with solutions to the projects they are assigned.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store