960 유체 그리드의 설계 결함 또는 그것을 잘못 사용합니까?

Question

나는 S tephen Bau's 960 fluid grid을 사용하고 있는데, 사용하지 않았다면 각 그리드가 부모의 %이기 때문에 중첩 된 그리드와 함께 사용한다고 생각하지 않습니까? 뷰포트가 1200 픽셀 인 경우 스타일 시트에서

는

.grid_12 { width:98%, } 

그럼 < 헤더/>는 1176px, 다음 중첩 된 < 탐색/> 그리드가 만드는 그것 1152.48px의 98 %가입니다 - 그것은이었다 경우 일반 960 고정 그리드는 모두 동일한 폭

<div id="wrap" class="container_12"> 
    <header class="grid_12"> 
     <div id="logo" class="grid_6 alpha"> 
      .. logo img ... 
     </div> 
     <div id="uti" class="grid_5 prefix_1 omega"> 
     .. util menu ... 
     </div> 
    <nav class="grid_12"> 
     .. nav list .. 
    </nav> 
    </header> 
    <div id="content class="grid_12"> 

     <div id="main-content" class="grid_12 clearfix"> 

      <div id="col-1" class="grid-9 alpha"> 

       </div> 
       <div id="col-2" class="grid-3 omega"> 

       </div> 

     </div> 

    </div> 

    <footer class="grid_12 clearfix"> 

    </footer> 

</div> 

Answer 1

이이 (그리고 대부분의 다른) 유체 그리드가 작동-이후 그들이 어떻게, 잘, 유체 남아 있어야 단지 제한 사항입니다을 할 것이다.

그래서 실제로 옵션은 중첩 된 격자를 자체 컨테이너에 넣거나 재사용 할 수있는 CSS 클래스를 만들어 너비를 100 %로 재설정합니다 (예 : .grid_full). 요소가 부모를 채우게하기 위해 .alpha 및 .omega과 결합되거나 결합되지 않음).

실제로 이러한 격자는 CSS 레이아웃과 템플릿 표준이 발전하고 견인력을 얻을 때까지는 스톱 갭이됩니다.

Answer 2

나는 비슷한 문제에 최근 직면했으며, 단지 비슷한 문제에 부딪 치는 사람 만 대답을 찾을 수 있도록 내 수정 내용을 담았습니다. 간단한 규칙에 따라 그리드를 중첩하는 것은 간단합니다. 행의 모든 ​​중첩 된 그리드는 합계 12 (또는 그리드 시스템에 따라 16 또는 24)까지 합계되어야합니다.

외부 격자 7 열을 원하는 경우 내부적으로 최대 12 개의 격자를 중첩 시키십시오 (예 : "grid_1", "grid_5"및 "grid_6").

의심되는가요? pull_i 및 push_i 클래스와는 관계가 없습니다. 클래스는 행의 "벽돌"을 재정렬하거나 소스 코드 순서를 변경하기위한 것입니다. 컨테이너 그리드는 grid_i 클래스 중 하나 일 수 있으며이 예에서는 grid_7입니다! 당신이 손실없이 용기가 필요한 경우 다음 중 하나를 만들 : 픽셀

.container_12 .full { 
width:100%; 
} 

실제 폭 : 부모 그리드의 모든 어린이는 어린이 %의 *의 폭 (픽셀의 부모 폭)/100 픽셀을 가지고 있습니다. 따라서이 예제에서는 "grid_1"= 6.25 * (실제 "grid_7"는 px로)/100 픽셀입니다.

물론이 모든 것은 비용이 들었습니다. 우리가 html 태그를 그룹화하여 의미론에서 레이아웃 정의로 뛰어 들었을 때 - 우리는 이것을 원하지 않습니다! "group_1", "group_2"과 같은 마법을 수행하는 클래스를 추가하는 것이 이상적이지만, 벽에 부딪친 다. 렌더링은 소스 코드 순서대로 진행됩니다!

내 대답을 참조하십시오. here.