/** Wrapperless Grid v2016-apr-22* =============================** See: https://bitbucket.org/snippets/danielsokolowski/d68x/simple-wrapperless-column-gird-system** Example:** ```* <section class="column 4/12">* ...* </section>* <section class="column width-8/12"> <!-- assuming `display: inline-block` for img-->* <p>* <img class="width-4/12" ... >Lorem lipsum</p>* </p>* </section>* ```*//** 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*/html{box-sizing:border-box;}*,*:before,*:after{box-sizing:inherit;}/* use this class to fix the parent to 'wrap' floated elements it contains */.floatWrapFix{overflow:auto;}.column{float:left;padding-right:1em;box-sizing:border-box;}.column:last-of-type{padding-right:0;}/* Below selectors leverage escaping characters - see: https://mathiasbynens.be/notes/css-escapes,Note that these can be used without the column class */.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%}
HTTPSSSH
You can clone a snippet to your computer for local editing.
Learn more.