수액 - 유체 용기의 기둥 수를 변경하십시오.

Question

저는 8 열 레이아웃에서 2 열 너비 인 div.article입니다.

레이아웃을 12 열로 늘리는 중단 점에서 나는 div.article을 여전히 2 열 폭으로 만들고 싶습니다.

유체 용기로 인해 컬럼 너비가 고정되지 않습니다.

문제는 div.article은 레이아웃 (및 열 크기)이 변경 될 때 원래 크기를 유지한다는 것입니다. 너비는 2 "오래된"열 너비로 유지됩니다.

.article { 
    @include span-columns(2); // original size 
    @include at-breakpoint($mobile_portrait) { 
     @include span-columns(2); // I must add this so its new width is large as 2 columns of the new layout 
    } 
} 

유체 그리드에서이 같은 반복적 인 마크 업을 방지하기 위해 어떤 방법이 있나요 : 그 문제를 해결하기 위해

는,이 같은 마크 업을해야합니까?

Answer 1

아니요, 없습니다. 그것은 유동적 인 디자인의 문제가 아닙니다.

당신이하고있는 일을 Susy 어휘에서 "마술 그리드"라고합니다. 눈금에는 화면 크기에 따라 다른 수의 열이 있습니다.

CSS를 작동 시키려면 작거나 큰 화면 레이아웃에 대한 스타일을 포함해야합니다. 여기서 당신이하는 일은 그들을 제공하는 것입니다. span-columns이 at-breakpoint 내부에서 호출되면 다른 값을 생성합니다.

이렇게하면 적절한 방법입니다. 해당 코드에 익숙해야합니다.

Susy의 마술 격자 데모를보세요 : http://susy.oddbird.net/demos/magic/#demo-breakpoints