Step by Step of The DIY Responsive Grid

First open The Calculator

How?

First, you decide the font size.

we are going to use 15px

Then, decide a line height that fits you

18px in our case, that yields a 1.2 ratio

Choose a set of breakpoints that go with your chosen line height

540px, 720px, 900px and 1080px which are all multiples of 18

Now, lets grab the CSS with the grid and paste it in your code.

Once you have the grid, you need to set a holder for your content.

this you can achieve with the following code:

<div style="width:100%; position: fixed;">
  <div class="inner grid">
    <p>Hello Grid!</p>
  </div>
</div>

.grid {
  /* Code */
}
.inner {
  width: 72rem; /* 1080px */
  margin: 0 auto;
}

for the container, we are going to use the rem size instead of the pixel one

For the purpose of this experiment we are going to create two columns of content, distanced from each by a line height.

<section>
  <div class="inner grid">
    <div class="span2">
      <p>Hello there, Do i look aligned? </p>
    </div>
    <div class="span2">
      <p> Yep, you look aligned alright </p> 
    </div>
    <div class="clearfix"></div>
  </div>
</section>

.span2 {
  display: block;
  width: 34.8rem; 
  margin: 0 1.2rem 0 0;
  float: left;
}
.clearfix {
  clear: both;
}
/* The crearfix is for antibug purposes */

the column size is given by the formula:
34.8rem = (1080”media query” / (15”font size” * 2“quantity of columns”)) - (1.2”ratio” * 1”number of spacings between columns”) */

When working with different breakpoints, you can change the amount of columns. For each 25 ems you can add a column without the text inside looking bad.

On the other hand, columns wider than 40 ems will also look bad because there will be too many characters per line (more than 100 aprox).

this are just guidelines. you can use the formula above to create your own column sizes.

note that if you reduce the font size you can have more columns. this is based on the need to have between 60 and 80 characters per line. that's why 25 ems and not 25 rems.

The ratio between the font size and the line height usually produces a vertical displacement in the browser. You have to adjust this manually by placing some padding on the top of the containers.

we used a 3px padding top to adjust for the 3px difference between 15 and 18

Each typeface has a different vertical alignment. This results in typography moving up and down the grid when you change typefaces. The line height and the margins will remain the same, but the letters will no longer sit on the baseline. You can fix this by changing the padding on the top of the container accordingly.

be wary of spacings generated by html components, such as fieldsets, tables, blockquotes, etc. reset the margins and padding to 0 and adjust then by hand.

Read here for the explanation of why the DIY Responsive Grid.