960.gs와 같은 CSS 그리드 시스템에 패딩 추가

Question

960.gs 16 열 그리드 시스템을 사용하는 사이트를 만들고 있습니다. 여기 위에 중첩 격자 열이, 디자인의 관련 부분의 스크린 샷입니다 :

문제는 흰색 "인기있는 바로 지금"박스입니다. 이 배경이 흰색이기 때문에 상자 안쪽에 약간의 패딩이 필요합니다. 간단합니다 : 나는 부모 한테 <div>을 추가하고 적절하게는 padding: 10px 및 흰색 배경으로 스타일을 지정했습니다.

그리드를 내부 '<div>'처럼 다시 사용하려고하면 문제가 발생합니다. 예를 들어 흰색 상자 안에 링크 목록을 5 열 컨테이너에 넣고 3 열 컨테이너에 이미지를 넣으십시오 (미안, 스크린 샷에는이 크기로 표시되지 않음).

부분적으로 작동하는 .inner 클래스 안에 그리드 열 크기를 다시 정의 해 보았습니다. 각 열 크기에서 10 픽셀을 제거했습니다. 여백을 고려하기 위해 전체 너비가 20px 미만이어야하기 때문입니다. 이것은 .inner 컨테이너 내에 정확하게 두 개의 자식 <div>s이있는 경우에 작동하지만, 분명히 2보다 많거나 적은 경우 일이 잘못 보이기 시작합니다.

누구나 이런 종류의 문제를 처리하기위한 좋은 전략이 있습니까? 배경 색상에 관계없이 모든 열에 패딩을 기꺼이 넣을 수는 있지만 그리드를 해킹 할 때 원하는 것처럼 작동하지 않습니다.

감사 매트

Answer 1

960gs 중첩을 허용하는 .alpha 및 .omega 클래스가 있습니다. 일반적으로이를 적용한 요소에서 선행 10 픽셀 및 후행 10 픽셀의 여백을 제거합니다. 이러한 반전하고 당신에게 당신이 필요로하는 패딩 줄을 악용 할 수 있습니다 - 전체 열 너비가 추가 할을하지만, 패딩 내가이 테스트를하지 않은

<div class="container_12"> 
    <div class="grid_12"> 
    <div class="grid_5 omega">...</div> 
    <div class="grid_3 alpha">...</div> 
    </div> 
</div> 

은 "잘못"옆에있을 것입니다 그래도 작동 여부는 확실하지 않습니다.