XY Grid Half Size Gutters

4

Replies

Follow
by

Christian Magill
- Framework: Sites
- Tags: 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>

Thanks for any help!

4

Replies

Follow
XY Grid Half Size Gutters

by

Christian Magill Tuesday, June 12, 2018 at 9:51 AM EST

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>

Thanks for any help!

Luke Cottingham over 1 year 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!