Light Straightforward CSS Grid

Skeleton vanilla CSS grid

When you have been at it for a while you realize most of the time less is more, and so in that spirit below is a skeleton grid. It was created without any pre-processor in vanilla CSS, and has been field tested on enterprise level projects.

Source code here: https://bitbucket.org/snippets/danielsokolowski/d68x/light-column-gird-system

If this has helped you, be legendary and do social share this and do follow me on twitter @danielsokolows.

/*
Light Column Grid v2018-Dev-05
##############################

See: https://bitbucket.org/snippets/danielsokolowski/d68x/light-column-gird-system

TODO,Jun-13: possibly rather then negative margins use calc and space-between to avoid issues with horizontal scroll on small devices, see: https://stackoverflow.com/questions/20626685/better-way-to-set-distance-between-flexbox-items

Example:

```
<div class="columnWrapper">
   <div class="column width-4/12">
      ...
   </div>
   <div class="column width-8/12">
      <!-- assuming `display: inline-block` for img-->
      <p>
         <img class="width-4/12" ... >Lorem lipsum</p>
      </p>
   </div>
</div>
```
*/


/*
Make padding grow in-ward
=========================

Apply a natural box layout model to all elements, but allowing components to change, which is
required for our column (`width-*`) classes to ensure padding does not effect their total width.

If below `html` conflicts with your exisiting layout comment it out and uncomment `box-sizing: border-box` in the `.cloumn` definition. 
*/
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}



/*
* The 12 column based grid
*
* Class names leverage ability to escape characters - see: https://mathiasbynens.be/notes/css-escapes, Note that these can be used without the column class 
*/
.columnWrapper {
    display: flex;
    flex-wrap: wrap;
    margin-left: -1em;
    margin-right: -1em;
}


.column {
    padding-left: 1em;
    padding-right: 1em;
    /*box-sizing: border-box;*/
}

.column.equalHeights  {
    display: flex;
}

.width-1\/12 {
    width: calc(100% / 12)
}

.width-2\/12 {
    width: calc(200% / 12)
}

.width-3\/12 {
    width: calc(300% / 12)
}

.width-4\/12 {
    width: calc(400% / 12);
}

.width-5\/12 {
    width: calc(500% / 12)
}

.width-6\/12 {
    width: calc(600% / 12)
}

.width-7\/12 {
    width: calc(700% / 12)
}

.width-8\/12 {
    width: calc(800% / 12)
}

.width-9\/12 {
    width: calc(900% / 12)
}

.width-10\/12 {
    width: calc(1000% / 12)
}

.width-11\/12 {
    width: calc(1100% / 12)
}

.width-12\/12 {
    width: 100%
}

/* on mobile devices go full width for all columns sizes */
@media only screen and (max-width: 750px) {
    .column {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }
}