Menu icon Foundation
How to collapse Foundation's xy-grid-layout cells outer gutters?

Asked this question 5 days ago on Stackoverflow with no luck. Hoping someone can help: https://stackoverflow.com/questions/46478566/how-to-collapse-foundations-xy-grid-layout-cells-outer-gutters

xy-grid

Asked this question 5 days ago on Stackoverflow with no luck. Hoping someone can help: https://stackoverflow.com/questions/46478566/how-to-collapse-foundations-xy-grid-layout-cells-outer-gutters

pwl about 2 years ago

I am also interesting, any idea?

Nik Sol about 2 years ago

Hello Ben,

Here is the css that have worked for me: 

.fr_gallery {
  @include xy-grid(horizontal, true);
  @include xy-grid-layout(3, '.fr_gallery-item', true, $grid-margin-gutters, margin, right left top bottom);
  background-color: $dark-gray;
}

.fr_gallery-item {
  background-color: $black;
  border: rem-calc(1) dashed $white;
  color: $white;
  width: calc(33.33333% - 0.834rem) !important;
}
.fr_gallery-item:nth-child(3n+0) {
  margin-right: 0;
}
.fr_gallery-item:nth-child(3n+1) {
  margin-left: 0;
}

As you can see I had to modify a bit your .fr-gallery and I had to add custom width to the items as eliminating left and right margins leads to unbalanced total width of the container. 

But I think the best would be to use custom padding instead. Here is another code using them:

.fr_gallery {
  @include xy-grid(horizontal, true);
  @include xy-grid-layout(3, '.fr_gallery-item', true, $grid-margin-gutters, padding, right left top bottom);
  background-color: $dark-gray;
}

.fr_gallery-item {
  background-color: $black;
  border: rem-calc(1) dashed $white;
  color: $white;
}
.fr_gallery-item:nth-child(3n+0) {
  padding-right: 0;
}
.fr_gallery-item:nth-child(3n+1) {
  padding-left: 0;
}

 As you can see I have programmatically converting margin into padding values and then with :nth-child eliminating those paddings from every 1st and 3rd item. This way I don't have to touch width.

This is not the cleanest solution, but it looks like it works.