Creating a grid system the right way

Currently all the grid systems has low flexibility and you have rely on complex documentation if you want to use them . For one of my projects I needed a grid system that will fit to all cases that are ot there.

The simple solution:


.row{
  display:table;
}

  .col{
    display:table-cell;
  }

Using this technique is the only way to create grid system that will have no limitations :).


Benefits:

You don't have to set with to every column:

You can use the vertical align property:


So how actually this can be implemented in real life?!

First of all you mus set the layout of the .row element and the width to be 100% fit to its parent.


.row{
  table-layout: fixed;
  width:100%;
}
.col{
  vertical-align: top;
  /* by default it is set to middle to all table elements */
}

Using this technique, .col in subsequent .row do not affect to the parent width.

The next thing you need to do is to set content holder class. For example lets call it " .col-content "

This is the element that will have all the paddings, margins, "positions" ... etc.


.col-content{
  padding-left:15px;
  padding-right:15px;
}

.row > .col:first-child > .col-content{
  padding-left:0;
}

.row > .col:last-child > .col-content{
  padding-right:0;
}

EXAMPLES:  BOXED


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis congue nec urna dapibus aliquam. Pellentesque fringilla, ligula sed ultricies tincidunt, lectus odio placerat ante, ac auctor ante turpis sed eros.
Maecenas interdum varius sapien, interdum dictum leo varius quis. Aenean vitae nulla ultrices, vulputate enim et, fringilla risus. Quisque vel lobortis nibh.
Lorem Ipsum

Vertical centered:


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis congue nec urna dapibus aliquam. Pellentesque fringilla, ligula sed ultricies tincidunt, lectus odio placerat ante, ac auctor ante turpis sed eros.
Maecenas interdum varius sapien, interdum dictum leo varius quis. Aenean vitae nulla ultrices, vulputate enim et, fringilla risus. Quisque vel lobortis nibh.
Lorem Ipsum

Multiple columns


1

2

3

4

5

6

7

8

9

10


As you can see all the examples has the same class names. Only with 20 line of css, you can have the same result as any complex framework and many other features :)

Of course you can add your class names or ids, and if you set a width to one element the others will fit to it.

Now lets put everything together:


.row{
  display:table;
  table-layout:fixed;
  width:100%;
}
.col{
  display:table-cell;
  vertical-align: top;
}

.col-content{
  padding-left:15px;
  padding-right:15px;
  position: relative;
}

.row > .col:first-child > .col-content{
  padding-left:0;
}

.row > .col:last-child > .col-content{
  padding-right:0;
}