Menu icon Foundation
XY Grid - Custom Block Grid Margins

Hello there - I'd really appreciate some help with what I assume is a very simple issue!

I'm new to working with SASS and the XY grid (having previously worked with plain CSS and the float grid), and am rather stuck when it comes to block grids and SASS! What I'm trying to do is create the following simple block grid example via the custom block grid SASS mixin:

<div id="gallery" class="grid-x grid-margin-x small-up-1 medium-up-2 large-up-3">
  <div class="gallery-item">cell</div>
  <div class="gallery-item">cell</div>
  <div class="gallery-item">cell</div>
</div>

What is important about this is that the left and right edges of the block grid are flush against the edges of the main container (and thus the content above and below it). From what I understand, it's the 'grid-margin-x' that does it; when 'grid-padding-x' is used, the block grid is indented within the main container, with left and right padding either side of it.

The following SASS mixin  for a custom block grid produces the indented appearance that I don't want:

.gallery {  
    @include breakpoint(small) {
        @include xy-grid;
        @include xy-grid-layout(1, '.gallery-item', true, $grid-margin-gutters, margin, right left top bottom);
    }
    @include breakpoint(medium) {
        @include xy-grid;
        @include xy-grid-layout(2, '.gallery-item', true, $grid-margin-gutters, margin, right left top bottom);
    }
    @include breakpoint(large) {
        @include xy-grid;
        @include xy-grid-layout(3, '.gallery-item', true, $grid-margin-gutters, margin, right left top bottom);
    }
}

How do I change this so that 'grid-margin-x' applies, and there is no indentation/padding to the left and right of the block grid? I should be clear that I'd like the gutter to remain between the blocks.

Thank you!

block gridxy gridcustom block gridSass

Hello there - I'd really appreciate some help with what I assume is a very simple issue!

I'm new to working with SASS and the XY grid (having previously worked with plain CSS and the float grid), and am rather stuck when it comes to block grids and SASS! What I'm trying to do is create the following simple block grid example via the custom block grid SASS mixin:

<div id="gallery" class="grid-x grid-margin-x small-up-1 medium-up-2 large-up-3">
  <div class="gallery-item">cell</div>
  <div class="gallery-item">cell</div>
  <div class="gallery-item">cell</div>
</div>

What is important about this is that the left and right edges of the block grid are flush against the edges of the main container (and thus the content above and below it). From what I understand, it's the 'grid-margin-x' that does it; when 'grid-padding-x' is used, the block grid is indented within the main container, with left and right padding either side of it.

The following SASS mixin  for a custom block grid produces the indented appearance that I don't want:

.gallery {  
    @include breakpoint(small) {
        @include xy-grid;
        @include xy-grid-layout(1, '.gallery-item', true, $grid-margin-gutters, margin, right left top bottom);
    }
    @include breakpoint(medium) {
        @include xy-grid;
        @include xy-grid-layout(2, '.gallery-item', true, $grid-margin-gutters, margin, right left top bottom);
    }
    @include breakpoint(large) {
        @include xy-grid;
        @include xy-grid-layout(3, '.gallery-item', true, $grid-margin-gutters, margin, right left top bottom);
    }
}

How do I change this so that 'grid-margin-x' applies, and there is no indentation/padding to the left and right of the block grid? I should be clear that I'd like the gutter to remain between the blocks.

Thank you!

Rebecca Y over 1 year ago

Hi there! I do need to make progress with my project, so any suggestions would be very much appreciated. Thank you!

Julie Lewis 3 months ago

This is n older post, so I hope you got an answer.

 

I think if you want everything flush to the sides of the container, you use just grid-x and omit grid-padding-x and grid-margin-x.