Default and probably the most used grid system is this. It offers 12 grid columns, from 1 to 12 and allows to combine them in many ways. It is fully responsive and use percentages not pixels. This is what make it always to stay full width.
Sometimes you may need a grid column that is a bit wider than one and a bit narrow than the next possible column. Here you can use halves. For example if you want to use a column that is between 7 & 8, that would be 3.5 and the CSS class is .desk-7-5
. Simple like that. Now to complete the row you may use .desk-4-5
and this will result in a total number 12.
What if you know the number of columns you want to use and nothing more, just columns? For this is better to say column X of Y in total. For example to create 5 columns it's not possible with the grid system demonstrated above, but with the next below you can create any number of equal columns. Here you can use this class .desk-1of5
and it will create 5 equal columns.