Lightweight Nestable Grid

@media (min-width: 40em) { /* 40 × 16px = 640px */ .grid { margin: 0 -0.75em; } [class*="grid__col--"] { display: inline-block; padding: 0 0.75em; vertical-align: top; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /* Enables the use of padding without breaking the grid */ } .grid[class*="grid__col--"] { margin: 0; padding: 0; } .grid__col--20 { width: 20%; } .grid__col--25 { width: 25%; } .grid__col--30 { width: 30%; } .grid__col--33 { width: 33%; } .grid__col--40 { width: 40%; } .grid__col--50 { width: 50%; } .grid__col--60 { width: 60%; } .grid__col--67 { width: 67%; } .grid__col--70 { width: 70%; } .grid__col--75 { width: 75%; } .grid__col--80 { width: 80%; } .grid__col--100 { width: 100%; } }
A lightweight, nestable, mobile first grid. More info: http://github.com/joshnh/lightweight-nestable-grid

1 Response

Be aware that if you use 'inline-block' in this grid, the markup of the grid should not have any whitespace or, as in the codepen example ( http://codepen.io/joshnh/pen/f2d2f034c97f4d6d89c47955c3b92f8d), use empty conditional comments instead for a better readability of the markup. If not, the last grid element (of a 'row') will drop to the next line. There are also pure CSS solutions to solve the whitespace issue, but these are tricky as they rely on the font you use..

Write a comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.