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.

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:

  1. Divided the total width of 1800px by 8
  2. Subtracted 20px
  3. Divided the solution by 1800px

For example, to get the size of 3 columns:

  1. 1800 / 8 = 225
  2. 225 x 3 = 675
  3. 675 - 20 = 655
  4. 655 / 1800 = 0.3638888
  5. 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


2 Answers 2


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 {
  • \$\begingroup\$ You know that CSS calc() is supported in all major browsers, right? \$\endgroup\$ Commented May 29, 2014 at 6:40
  • 1
    \$\begingroup\$ @MadaraUchiha But that's just the calculation. CSS variables and Scoped CSS, which are the other points I mentioned, are still far from reality but are done using LESS/SASS. Besides, for maximum cross-browser support, I wouldn't go all in on unstable APIs. Best to play safe. \$\endgroup\$
    – Joseph
    Commented May 29, 2014 at 7:30
  • \$\begingroup\$ True, just mentioning the fact :) \$\endgroup\$ Commented May 29, 2014 at 7:30

I wouldn't name my classes like that for anything that goes out in the open.

While it sounds cool and is a nice inside joke, the class names are not semantic, hard to remember and not very helpful in general (What's this .belt I see on the source? Where's the actual belt on the page?)

Other than that, CSS3s calc() has some very good browser support, I suggest you try it out instead of doing manual and imperfect accuracy calculation. Alternatively, you can use LESS or SASS like the other answer states.

.container { width: 1800px; }
.container m1 { width: calc(1800px * 1 / 8); }
.container m2 { width: calc(1800px * 2 / 8); }
/* snip */
  • \$\begingroup\$ I should have mentioned that I have to support IE7. And the calc() is not supported. But you do have good points in most uses, so I am still upvoting. \$\endgroup\$
    – JGallardo
    Commented May 29, 2014 at 16:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.