Minimal Responsive Grid

How to create a responsive layout in a few easy steps.

by Jordan Lev

Step 1: Set the viewport

Tell the browser that the page should be sized to the width of the device or browser window itself (not the "desktop" page size) by putting this in your HTML <head>:

Step 2: Use the better box model

Tell the browser to treat padding and border widths as part of the overall element width (so we can sanely use percentages for element widths) by putting this in your CSS:

More details.

Step 3: Create a page container

Sets a maximum width for the layout on wide (desktop) screns.

Step 4: Create rows

Rows are containers for columns -- a row will always be placed underneath a prior row, regardless of screen width.

More details.

Step 5: Create columns

Columns are containers for the actual page content -- they will line up next to each other on wide screens, or underneath each other on narrow screens.

Step 6: Set mobile breakpoints

Set the screen width at which the columns should be displayed underneath one another as opposed to next to each other.

Step 7: Make it backwards and forwards compatible

To ensure your layout works with old versions of Internet Explorer, add the following to your HTML <head>:

And to ensure your layout will continue to work with future browsers, add the following to your CSS:

More details.

What's next?

The above steps represent all the basics you need to know to create reponsive layouts. But here are more things you might want to consider: