Creating a CSS Grid – Columns and Gutters

Now that we have determined the important aspects of the website, let’s get to the lovely math portion of the process.  This is probably one of my favorite parts as I really enjoy mathematics.  We will determine how wide we want the columns in our grid and how far apart each column should be.  This really comes down to how crowded/spaced out do you want the website to look.  I feel that moderation is always key, but this really is dictated by personal preference and the needs of the website.

A good first step is to consider what is the maximum width you want the actual content of the page to be.  Then you would determine how many columns you feel you need within the defined width of your website.  Then we do some lovely math to determine the actual widths of the columns and gutters (the spaces between two columns).

So let’s give an example to start us off and use for the remainder of the entries.  Let us say that we would like the page to have a width of 1000px at a maximum.  After this you have decided that you would like to have 12 columns.  If we then divide 1000px by 12 columns, we would return 83 and 1/3 px per column.  That is awesome, but we have not considered the gutters.  We know need to consider how much larger we want the columns to be in comparison to the gutters and whether we want the outside of the pages to be gutters or columns.  Let us say that we will end with columns which then means we will have 12 columns and 11 gutters.  If we would like the columns to roughly be 3 times the width of a gutter, then we could do 65px columns and 20px gutters.  (65 * 12 = 780, 20 * 11 = 220, 780 + 220 = 1000!).  This gets us started, but this is for a 1000px page.  What if we are wanting to view this on a 900px screen, but do not want to reorganize the whole page?  In the section article, we will take these numbers and do some more magic!

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