0

I'm trying to achieve a 50/50 panel layout using Bourbon Neat 2.x, where the left panel is going to have a background colour, but grid margins are causing me some issues.

I initially just had the standard grid-container as a parent, with two divs using the @include grid-column(6) mixin. Trouble is, that left a margin at the left and right of the grid so the 50% background colour panel didn't quite work.

I then tried adding the grid-collapse mixin to try and get rid of the margins (codepen example), but that seems to have the effect of making the page > 100% width, leading to a horizontal scroll for the user.

Is there a simple way to achieve this layout, or should I use a custom grid definition for the panels with no margins at all?

Paul
  • 753
  • 5
  • 19
  • Possible duplicate of [Remove outside gutters in Neat 2](https://stackoverflow.com/questions/42625159/remove-outside-gutters-in-neat-2) – whmii Nov 02 '17 at 14:50

1 Answers1

0

Neat can cover this use case but it requires slightly more html. the trick is that the object with the class grid-collapse (.container in your example) needs a wrapper around it with width: 100%; overflow: hidden;.

Here is a question that also answers this → Remove outside gutters in Neat 2

whmii
  • 430
  • 2
  • 10