재단의 그리드 열 크기 조정

Question

나는 다음 프로젝트에 대한 적합성을 평가하기 위해 Zurb Foundation과 함께 놀았습니다. 브라우저의 너비를 조정할 때 편안하지 않은 특성을 발견하여 어떤 방법으로도이를 수행 할 수 있는지 확인하고 싶습니다.

내가 행당 4 개의 이미지 ('열')가있는 그리드가 있다고 가정 해보십시오. 브라우저 창의 너비를 줄이면 당연히 이미지의 양은 너비가 줄어들면 처음 세 개, 그 다음으로 두 개, 마지막으로 한 개당 하나의 이미지로 줄어들 것입니다.

대신에 Foundation이하는 일은 div 당 줄을 4 줄로 줄이고 4 줄의 공간이 부족할 때 바로 줄 당 하나의 이미지로 바로 이동하는 것입니다.

이 문제는 논리적이지 않으므로 수행 할 방법이 있어야한다고 가정하고 있지만 http://foundation.zurb.com/docs/grid.php을 통해 div 또는 블록 격자로 작업 할 수있는 방법을 찾지 못했습니다.

나는 일종의 반응 형 그리드의 101 기능이라고 가정하지만 이러한 CSS 프레임 워크에 대해서는 많은 경험이 없습니다. 그렇다면 행당 열의 양에 따라 점진적으로 감소하기 위해 자체적으로 미디어 쿼리를 작성해야합니까?

감사합니다.

Answer 1

기초는 내용이 반응 적 또는 유동적 이도록 강요하지 않지만 그리드 자체는 강제적입니다. 12 열 그리드가 모바일 그리드로 붕괴되는 특정 지점까지 유동적입니다. (기본 그리드 설정을 가정 할 때)

그러나 모든 이미지가 열 안에 떠 다니게하여 원하는 동작을 얻을 수 있습니다.

등 :

img {float:left; width:24%;} 

그런 다음 필요에 맞게 min- 및 최대 폭을 추가하려고합니다.

img {float:left; width:24%; min-width:100px; max-width:300px;} 

Answer 2

나는이 항목을 발견 한 것과 같은 문제가있었습니다. 나는 이것이 이미 대답되었고 해결되었다는 것을 알고 있지만 나는 단지 나의 대답을 나누고 싶다. 블록 격자가 적합합니다. 내가 할 일 개 항목을 원하는 다음

<ul class="row portfolio small-block-grid-1 medium-block-grid-2 large-block-grid-3"> 
    <li> 
     <img src="images/sample1.jpg" width="640" height="480"> 
    </li> 
    <li> 
     ... 
    </li> 
</ul> 

: http://foundation.zurb.com/docs/components/block_grid.html 페이지의 고급 섹션

내 HTML에서

, 방금과 같이 서로 다른 화면 크기에 내가 행 당 방법을 많은 항목 지정 클래스를 추가 작은 장치에 표시, 매체에 2 개, 행당 3 개가 큰 장치. _app.scss에서 "기초/구성 요소/블록 격자"를 활성화했습니다. 그리고 효과가있었습니다! :)