가변 열 레이아웃이있는 응답 격자

Question

"전통적인"격자 레이아웃을 사용하여 화면 너비에 따라 열 수를 조정할 수있는 방법이 있습니까?

저는 응답 성이 뛰어난 유체 그리드 시스템 중 하나를 사용하고 있습니다. 예를 들어 zurb foundation의 그리드 (12 개 열 사용)가 그 예입니다.

<div class="row"> 
    <div class="four columns"></div> 
    <div class="four columns"></div> 
    <div class="four columns"></div> 
</div> 

특정 브레이크 포인트 (화면 너비)에서 나는 네 개의 열 대신 세에서 내 콘텐츠를 표시하고 싶다고 말 :

내가 페이지 이상에 걸쳐 세 개의 열을 말한다.

<div class="row"> 
    <div class="three columns"></div> 
    <div class="three columns"></div> 
    <div class="three columns"></div> 
    <div class="three columns"></div> 
</div> 

더 큰 화면이라도 더 어쩌면 더 작을 수 있습니다.

문제는 - 마크 업을 변경해야하는이 격자 (또는 유사한 마크 업과 함께)를 사용하는 것이 문제이며, css mediaqueries를 사용하여 컬럼 수를 조정할 수 없습니다.

쉽게 열 개수를 변경할 수있는 방법이 있습니까? 어쩌면 자바 스크립트를 사용하고 있습니까?

이 방법으로 맞춤 설정할 수있는 그리드 시스템이 이미 있어야하지만 어떤 것도 찾지 못했을 것으로 확신합니다.

Answer 1

semantic grid을보고 싶을 수 있습니다. 그 이유는 모든 것이 마크 업이 아닌 css 파일 내부에서 정의되기 때문입니다. LESS를 사용하므로 문제가 될 수 있습니다.

또한, 당신은 "전통적인"그리드 레이아웃을 사용하여 화면의 너비에 따라 열 수를 적응하기 위해 어떤 방법이 있나요

해결할 수 비율에 그리드를 만들 수 있습니까?

비록 이것이 당신이 고쳐야 할 접근법은 아니지만, 나는 그것이 당신을 위해 문제를 해결할 것이라고 믿습니다.

사용할 열의 수를 지정하십시오.

Answer 2

체크 아웃 재단의 블록 그리드 : http://foundation.zurb.com/docs/components/block_grid.html

Answer 3

시도는 굉장 skeljs. 그것은 당신이 원하는 것을 정확하게 할 것입니다.

Answer 4

http://gridsetapp.com (정확히 2 년 전이지만 누군가 다른 사람이 같은 해결책을 필요로한다는 것을 알고 있습니다.)