What's the best way to allow for multiple gutter sizes with the xy grid?
I want use the standard gutter sizes, but also have some areas where I need gutters to be half the size.
Is this what I'd use xy-gutters() for or would I be better using xy-cell()?
I'm thinking something like
<div class="grid-x grid-padding-padding-half-x">
<div class="cell medium-6"></div>
<div class="cell medium-6"></div>
</div>
Thanks for any help!
My immediate thought is to create a new class that overrides the framework's padding. I'd need to look at the dependent styles first, but thinking as I type, I would do:
I would then create an overriding style in your scss stylesheet with the following:
This is assuming you are using SCSS first, and then compiling your css from that. If the override is conflicting, stick an !important in there as a last resort. Try being more specific with your selectors first though.
Hope this helps!