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.