Menu icon Foundation
XY Grid Half Size Gutters

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!

xy grid

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!

Luke Cottingham 5 months ago

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:

<div class="grid-x grid-padding-x padding-half">
...
</div>

I would then create an overriding style in your scss stylesheet with the following:

.grid-padding-x.padding-half {

	padding-left: map-get($grid-padding-gutters, medium) / 2;
	padding-right: map-get($grid-padding-gutters, medium) / 2;

	@include breakpoint (small only) {

		padding-left: map-get($grid-padding-gutters, small) / 2;
		padding-right: map-get($grid-padding-gutters, small) / 2;

	}

}

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!

Christian Magill 5 months ago

Thanks, I'll give something like that a try. Although I would assume the padding would need to go in cell descendants as well.