Long ago making columns of content in CSS was very hard. First people started making layouts with tables. If you come across one of those websites and are asked to do web work, run the other way. Tables are not meant to be used to create the design of a site and should be avoided.
The Gutter Issue
Soon people began creating sites using the float property. However it was not really meant for this either and came with it’s own issues. Namely the gutter issue. When trying to design elements next to each other with certain widths and space in between there were many issues. When floating two columns of 50% width next to each other, there were issues if you wanted a gutter between the two columns.
The second column would fall to the next line, because there was no room for the gutters. The margins or padding used for the gutter were not included in the 50%. So it was 100% plus margins and padding. Click the first box to see what happens when you try to add margins as a gutter.
So people would try tons of ideas and some grids came out like the 960 CSS Grid. This was a grid made of margins and columns that were pixel based and added up to 960 so it worked, but only for 960 pixels and it was not really responsive.
Box-Sizing
Then the box-sizing property came out and changed everything! You could set it to border-box and now padding would be inside the element. So 50% really meant 50% and included the padding. Margins as gutters was still off the table, but with padding columns were a thing! With this method one can use padding to create gutters.
The only issue was that using padding meant it was adding space inside the element. So if you wanted two cards next to each other with blue backgrounds, the blue background would swallow the gutter so you would not see it. See below.
See how the padding is inside the borders. We want the padding to be outside the borders so there is spacing between elements, not inside them. This means you need to add a surrounding div around each element so the padding is not part of the element, but around the element.
Enter Column Divs
This surrounding div became known as column or col. You will see it in many frameworks even today. Here is the code above but with additional divs surrounding the blue boxes. This way the boxes have space outside of them.
Enter Row Div
Lastly to make sure the spacing is not on the outter edges of the columns, a negative margin of left and right can be applied to the parent holding the items. This will make them flush with the left and right. See how these look different then the ones above. Use inspect element to see the changes between all the boxes on this page so far!
Flexbox
We finally got flexbox which works much better than floating and removed a lot of issues with clearfixes and what not. The flexibility made it easier to stretch items. With flex grow and shrink, items were able to fit nicely.
Flexbox allows for a lot of other things, such as aligning items vertically and horizontally and is just really awesome.
Flexbox Issues
The margin as gutters issue still exists. If you wanted a column with a set width, whether percent or pixels, using margins would still push your items down to the next line or off the page. (depending on flex-wrap). So padding with column divs is still needed. This means you still need to wrap your items with extra divs.
There is also the issue that flexbox is not meant for rows and columns, but for one row or one column. However, most frameworks today use flexbox with column and row divs. It works nicely but, in my opinion it can be better.
Calc to the Rescue
An amazing function has been added to CSS called calc(). With it you can give a width to an item and use math to create the perfect size and remove the margin gutter issue. This allows for using margins as the gutter. Heres an example how:
.span-6{
width: calc(50% - 30px);
//or for flex flex-basis: calc(50% - 30px);
margin: 0 15px; //gutters on both sides
}The above code would make a width that takes the margins into consideration and always makes sure that the item fits perfectly. The margins on both sides are added together and removed from the total width of the item. Calc() even works in ie11!
This means we can get rid of the surrounding divs of row and column.
Unfortunately I have not seen many frameworks and grids adopt this. In my opinion it is awesome and ignition uses this for its flexbox grid. This means you DON’T need to use any surrounding divs for your elements. Just place your items directly inside the grid with span classes. No rows or column classes needed!
Here is the Flexbox-grid that comes along with ignition in action:
CSS Grid
CSS Grid entered the fray, and is awesome and allows for a full grid. You can define columns and rows and it works nicely. The grid also comes with a grid-gap property which basically removes the need for worrying about gutters altogether!
For the most part CSS Grid is great. But it actually isn’t as flexible as flex-box, in terms of content stretching to fill the left over area. Items can span columns but only if you tell them to. And they can never span half a column or a random amount.
So knowing when to use Flexbox and when to use a CSS Grid becomes key. It depends on what your trying to achieve. Sometimes a combination of the two can yield cool results.
You can try playing with the grids on the front page. There is a grid system you can play with and change some of the span classes and see how it works.