As I delve into the world of grid systems, I find myself grappling to comprehend it fully. The complexities can sometimes leave me feeling inadequate in my understanding.
From what I gather, a 12-column grid system without any margins means that the 12th column will take up 100% of the width, with each individual column being around 8.33333% wide.
However, when I examine various grid systems like onepcss and others, things become more confusing. They mention having a leftover 1%, as a full-width grid is supposedly equal to 99%. Even with 3% margins factored in, one column should be around 5.3333%, not the stated 5.5%.
Displayed below are some examples of their grids. Despite my attempts at basic math calculations, something seems amiss. Where exactly am I going wrong?
.col1 { width: 5.5%; }
.col2 { width: 14%; }
.col3 { width: 22.5%; }
.col4 { width: 31%; }
.col5 { width: 39.5%; }
.col6 { width: 48%; }
.col7 { width: 56.5%; }
.col8 { width: 65%; }
.col9 { width: 73.5%; }
.col10 { width: 82%; }
.col11 { width: 90.5%; }
.col12 { width: 99%; margin: 0; }