10 ms·
I came up with this (in relation to Bootstrap) in 2011: http://csswizardry.com/2011/08/building-better-grid-systems/ http://csswizardry.com/2011/08/building-bet
by csswizardry 12y ago
I came up with this (in relation to Bootstrap) in 2011: http://csswizardry.com/2011/08/building-better-grid-systems/ http://csswizardry.com/2011/08/building-better-grid-systems/
This then became the basis for CSS Wizardry Grids: http://csswizardry.com/2013/02/introducing-csswizardry-grids/ http://csswizardry.com/2013/02/introducing-csswizardry-grids...
- jherdman 12y agoWe're using CSS Wizardry Grids in a new project at Precision Nutrition. It's been pretty great so far, though the use of comments is quite something to wrap your head around with respect to grid items.
- Kiro 12y agoSorry, but the need to put "<!-- -->" everywhere is a dealbreaker for me. Example: <div class="grid__item lap--one-half desk--two-thirds"> ... </div><!-- --><div class="grid__item lap--one-half desk--one-third"> ... </div> What's the rationale for using inline-block instead of float?
- csswizardry 12y agoYou can actually enable a CSS-only hack[1] to avoid using the comments. Using `display: inline-block;` allows you to manipulate grids with text-level properties (e.g. `text-align: center;` to cause grid items to fill out from the center of the row), and also allows you to use `vertical-align: [top|middle|bottom];` to cause columns to start from different, well, alignments. [1] https://github.com/csswizardry/csswizardry-grids/blob/master/csswizardry-grids.scss#L103-L115 https://github.com/csswizardry/csswizardry-grids/blob/master...