BackgroundWe have to cater to large screens. So I created this portion of a grid system which is shown to users with screens larger than 1800px.SolutionThis grid is 1800px wide but can shrink down to 1200px, has 8 columns. I wanted 10px margin around the sides of each column. So I arrived at the number of 0.55555%. To get to any column size i: Divided the total width of 1800px by 8  Subtracted 20pxDivided the solution by 1800pxFor example, to get the size of 3 columns: 1800 / 8 = 225 225 x 3 = 675  675 - 20 = 655  655 / 1800 = 0.3638888  3 columns = 36.38888%Then I just plugged in the values. .belt {  width: 1800px;  max-width: 100%;  min-width: 1201px;  margin: 0 auto;}.belt .m1 { width: 11.388888%; }.belt .m2 { width: 23.88888%; }.belt .m3 { width: 36.38888%; }.belt .m4 { width: 48.888888%; }.belt .m5 { width: 61.388888%; }.belt .m6 { width: 73.88888%; }.belt .m7 { width: 86.38888%; }.belt .m8 { width: 98.88888%; }.belt .m1,.belt .m2, .belt .m3, .belt .m4, .belt .m5, .belt .m6, .belt .m7, .belt .m8{  float: left;  margin-left: 0.55555%;  margin-right: 0.55555%;}Naming this the Saturn framework since Saturn is huge. And the wrapper is named a belt, which is equivalent to Skeleton's .container class. The columns are prefixed by an m as in moon. (i.e. .m1, .m2, .m3, etc.)Demo available on this CodePen 
New CSS grid at 1800px
html;css