Largeur totale, disposition 50/50 dans Neat 2.x?

Question

J'essaie d'obtenir une disposition de panneau 50/50 en utilisant Bourbon Neat 2.x, où le panneau de gauche va avoir une couleur de fond, mais les marges de la grille me posent quelques problèmes.

Au départ, je n'avais que le standard grid-container en tant que parent, avec deux divs utilisant le mixage @include grid-column(6). Le problème est, qui a laissé une marge à la gauche et à la droite de la grille de sorte que le panneau de couleur de fond de 50% n'a pas fonctionné tout à fait.

J'ai ensuite essayé d'ajouter le grid-collapse mixin pour essayer de me débarrasser des marges (codepen example), mais cela semble avoir pour effet de rendre la page> 100% de largeur, conduisant à un défilement horizontal pour l'utilisateur.

Existe-t-il un moyen simple d'obtenir cette disposition, ou devrais-je utiliser une définition de grille personnalisée pour les panneaux sans aucune marge?

Answer 1

Neat peut couvrir ce cas d'utilisation mais il nécessite un peu plus de html. l'astuce est que l'objet avec la classe grid-collapse (.container dans votre exemple) a besoin d'un wrapper autour de lui avec width: 100%; overflow: hidden;.

Voici une question qui répond également à cette → Remove outside gutters in Neat 2