Bootstrap Grid System


One of the best complement for a custom web design is a custom-made responsive grid system. You can customize everything you need, including the number of columns, the size of columns and gutters and even the breakpoints you change your layouts at.

What goes into a grid system
You need to know three things before building your grid system.

First, you need to design your grid.
Are you using equal-width or unequal-width columns? How many columns do you have? What’s the size of your gutters and columns?
You can only make the right grid calculations when you’ve answered the above questions. To help you out, I wrote an article about designing grids. 
Second, you need to know how your grid behaves at different viewports.
Will you resize columns and gutters proportionally when viewport width changes? Will you change your columns while keeping gutters fixed? Will you change the number of columns at specific breakpoints?
You need to answer these questions as well. They give you clues on how to calculate your column and gutter widths. I wrote about these considerations in the same article as well, so give it a read if you’re unsure.
Third, will you like to write grid classes in your HTML?.
The frontend world is split into two factions when it comes to grids systems.
One faction writes grid classes in the HTML (this is how Bootstrap and Foundation does it). I call it these HTML grid system.
Building your grid system There are eight steps to building your grid system. Here are the steps in summary:
Choose a spec to create your grid with

  • Set box-sizing to border-box
  • Create a grid container
  • Calculate column-width
  • Determine gutter positions
  • Create a debug grid
  • Make layout variations
  • Make your layouts responsive

Leave a Reply

Your email address will not be published. Required fields are marked *