Creating a CSS Grid – Pixels to Percents

So we have determined the width of our columns and gutters.  Columns will be 65px each and gutters will be 20px each. With 12 columns and 11 gutters that makes 1000px.  That is awesome, but what if the screen is only 968px?  We don’t want to have the whole website looking rough just because a screen is a few pixels less than we intended.  So let’s change these numbers to percents instead!

So how do we do this?  Let us consider the parts of the problem.  We have columns and gutters as the parts, and the total width is the whole.  This means each column is 6.5% and each gutter is 2.0%.  Now we can respond to the width of the viewport using percents!  But we still have a problem.  What if we want something to span more than one column?  How would this affect our percents?

Let us say that we want something to be around half of the page (so spanning 6 columns).  Then the content would  actually cover 6 columns and 5 gutters.  So we need to add up all of those percents to come up with 49%.  The reason this occurs is to leave a gutter between our large content section and the next section/column coming up (the new section/column will give the additional 1% we need for our 2% gutter).

So now we have converted our columns and gutters to percent widths.  This will allow for different screen sizes.  But now what if the screen is too small?  We will cover media queries in the next post.

Posted in Blog Posts, Web Development Tagged with: , , ,