전체 너비, 깔끔한 2.x의 50/50 레이아웃?

Question

Bourbon Neat 2.x를 사용하여 50/50 패널 레이아웃을 얻으려고합니다. 왼쪽 패널에 배경색이 있지만 그리드 여백으로 인해 문제가 발생합니다.

처음에는 믹스 인을 사용하는 두 개의 div가있는 부모로 표준 grid-container을 가지고있었습니다. 문제는 그리드의 왼쪽과 오른쪽에 여백이 생겨 50 % 배경색 패널이 제대로 작동하지 않는다는 것입니다.

그런 다음 grid-collapse 믹스 인을 추가하여 여백을 없애려고 시도했지만 (사용자의 수평 스크롤로 이어지는 100 % 너비의 페이지를 만드는 효과가있는 것 같습니다.)

이 레이아웃을 구현하는 간단한 방법이 있습니까? 아니면 여백이없는 패널에 사용자 정의 격자 정의를 사용해야합니까?

Answer 1

깔끔한 케이스를 커버 할 수 있지만 조금 더 HTML이 필요합니다. 속임수는 클래스 grid-collapse (예에서 .container)의 객체가 width: 100%; overflow: hidden; 인 래퍼를 필요로한다는 것입니다. 여기

또한이 → Remove outside gutters in Neat 2