CSS 프레임 워크의 격자 중첩

Question

CSS 프레임 워크에서 격자 중첩을 이해하지 못합니다. 한 열 = 4.16667 %,이 - - 8.33333 %, 열두 -

나는 24 콜럼 그리드와 Foundation CSS 프레임 워크를 사용하고 50 % 등을

이 1920 픽셀 브라우저 폭에 대한 내 그리드입니다 - 왼쪽 = 10 개 (41.66667 %), 오른쪽 부분 = 14 개 (58.33333 %) - Codepen. 제목과 콘텐츠 블록이 오른쪽 내부

:

제목이 (가«푸시»라고 재단에) 1 열 개 패딩 :

<div class="row small-padding-horizontal-1 medium-padding-horizontal-1 large-padding-horizontal-1 xlarge-padding-horizontal-1 xxlarge-padding-horizontal-1">…</div> 

- 당신은에서 보는 바와 같이 첨부 된 이미지 머리글이 눈금에 맞지 않습니다.

내용 블록은 전체 5 열 수 있습니다 :

<div class="small-5 medium-5 large-5 xlarge-5 xxlarge-5">…</div> 

- 당신이 첨부 이미지 참조로이 블록은 그리드에 맞지 않는 -이 5 열 폭하지 않습니다.

오른쪽 블록이 58.33333 %이므로 모든 내부 블록의 너비가 전체 창 너비가 아니라이 블록 너비에 따라 계산됩니다.

내 질문은 - 부모 블록 안에있는 내 중첩 된 블록에 대한 격자를 맞추려면 어떻게해야합니까?

Codepen

Answer 1

응답 프레임 워크는 계산 필요에 따라

이 시간에 조금 까다 지저분한입니다 .. 부모는 div % 폭으로 작동합니다.

귀하의 요구 사항을 볼 경우 5 column을 14-column 그리드에 맞추고 싶습니다.

이렇게하려면 이렇게 계산해야합니다. 그래서 5-columns in 14-columns 중첩 정수가 그래서 (8 또는 9 열)에 가장 가까운 하나를 선택하지 8.57 columns 될 것 35.174%의 공간 .Considering 24 columns을 점유하면서

귀하의 14-column 지금 24-column입니다.

그러나 정확하게 ... 당신이 당신에게주는 정수로이 있어야한다 24 columns에서 5 in 14 columns 즉 60/7 갖고 싶어 14*7 columns10*7 colums 및 5*7columns는

그리드는 오른쪽에서 왼쪽으로 70-columns와 178-column 및 98-columns해야한다 및 35-columns 내부는 98-columns 그리드입니다.5 열 그리드

쉬운 방법 쓰기 사용자 정의 클래스는 35.17%

Answer 2

글쎄, CSS 프레임 워크는 첫 번째 수준 블록에 대한 그리드를 제공 차지 - 모든 중첩 된 블록을 수동으로 최고 수준의 그리드에 맞게 계산되어야한다. 나는 HTML 및 기초에 더 이상 사용하여 열 수업을 해요, 그래서

@media screen and (max-width: 1920px) { width: (5/14 * 100 + 0%); } /* width — 5 columns, parent container — 14 columns -> 35.7% */ 
@media screen and (max-width: 1440px) { width: (7/18 * 100 + 0%); } /* width — 7 columns, parent container — 18 columns -> 38.88 */ 
@media screen and (max-width: 1280px) { width: (7/18 * 100 + 0%); } /* width — 7 columns, parent container — 18 columns */ 
@media screen and (max-width: 1024px) { width: (10/22 * 100 + 0%); } /* width — 10 columns, parent container — 22 columns */ 
@media screen and (max-width: 640px) { width: (16/24 * 100 + 0%); } /* width — 16 columns, parent container — 24 columns */ 

:

이 메인 그리드에 맞게 빨간색 블록의 계산이다 (오른쪽 컨테이너는 화면 해상도의 따라 열 수를 변경) 프레임 워크의 grid.css 파일은 완전히 쓸모가 없기 때문에

Answer 3

모든 것들은 모든 프레임 워크에서 다르게 작동합니다.

캐스케이드 프레임 워크에서 격자 요소는 기본적으로 col 클래스 만 필요하며 무한히 col 클래스를 중첩 할 수 있습니다.

무한 중첩을 쉽게 허용하려면 격자 요소에 패딩이나 여백이 없어야합니다. 귀하의 페이지에서 일관된 도랑을 찾으려면 일반적으로 콘텐츠의 래퍼 인 cell 클래스를 사용하여 col 클래스를 보완하십시오.

예 :

<div class="col width-1of2"> 
    <div class="col width-1of2"> 
     <div class="cell"> 
      [Content] 
     </div> 
    </div> 
    <div class="col width-fill"> 
     <div class="col width-1of3"> 
      <div class="cell"> 
       [Content] 
      </div> 
     </div> 
     <div class="col width-1of3"> 
      <div class="col width-3of5"> 
       <div class="cell"> 
        [Content] 
       </div> 
      </div> 
      <div class="col width-fill"> 
       <div class="cell"> 
        [Content] 
       </div> 
      </div> 
     </div> 
     <div class="col width-fill"> 
      <div class="cell"> 
       [Content] 
      </div> 
     </div> 
    </div> 
</div> 
<div class="col width-fill"> 
    <div class="col width-1of4"> 
     <div class="cell"> 
      [Content] 
     </div> 
    </div> 
    <div class="col width-fill"> 
     <div class="col width-2of3"> 
      <div class="cell"> 
       [Content] 
      </div> 
     </div> 
     <div class="col width-fill"> 
      <div class="cell"> 
       [Content] 
      </div> 
     </div> 
    </div> 
</div> 

도 참조 this demo와 official documentation.