New CSS grid at 1800px

Background

We 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.

Solution

This 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 20px

• Divided the solution by 1800px

For 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

I want to suggest that you use LESS/SASS to build your library

You have a lot of math. One problem here is that if you want to change your sizes, you'd be facing a calculator, calculate and change values for each. One decimal place wrong and it could ruin your pixel-perfect calculations.

With LESS/SASS, you can define your values in variables, and have properties as math expressions. Want to change the dimensions? No need to meddle with the implementation, just change the variables (That's how BootStrap customizers work).

@fullWidth : 1800;

.fifty {
  width : percentage(@fullWidth/2);
}

Also, it has nesting. I think this is possible in place of your very long sequence up there. Much cleaner.

.belt {
  .m1, .m2, .m3, .m4, .m5, .m6, .m7, .m8 {
    ...
  }
}

StackExchange Code Review Q#51960, answer score: 4