html - Gutter Width Issues in Susy -


i have 24 susy column grid. i'm trying boxes each span 6 columns (so 4 per row), i'm wanting add gutters around them, withing wider container 24 columns wide. unfortunately, no matter try, can't work. seems columns not adjusting width accommodate gutters...i thought susy supposed that, no? i'm new of i've read lots of articles , posts , can't figure out answer, can give appreciated.

here's code:

.solutionthumbnails {   @include span(24 no-gutters);   @include container;   @include clearfix;    li {     @include span(6);     @include gutters(8px after);     background: #666;     float: left;     height: 240px;     display: block;     &:nth-child(4) {       margin-right: 0px;     }   } } 

and here's it's looking right now, ignore formatting otherwise, still coding :) (you'll see knocking fourth item down): http://i.stack.imgur.com/5tmwp.jpg

because sass isn't aware of dom, susy doesn't know span , gutter mixins being applied same element, or related in way. susy handle math when has information. think want something this?

.solutionthumbnails {   @include container(24);    li {     @include gallery(6 of 24 split);     background: #666;     height: 240px;   } } 

i don't know settings, or many specifics output need, should close. don't need set span, container, , clearfix on same element — the container mixin handles of that. similarly, gallery handles need consistent layout of same-sized items.

my example doesn't 8px gutters. way mix static (px) gutters fluid (%) grids, move gutters inside elements. can approximate 8px gutters fluid value changing gutter ratio needed. default ratio .25.


Comments

Popular posts from this blog

PHP DOM loadHTML() method unusual warning -

python - How to create jsonb index using GIN on SQLAlchemy? -

c# - TransactionScope not rolling back although no complete() is called -