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
Post a Comment