고정 크기 열이있는 응답 격자

Question

저는 Foundation Framework를 처음 사용하고 있으며 방금 사용하기 시작했습니다. Foundation Grid를 사용하여 반응이 빠른 디자인을 만들고 있습니다.

2x4 (행, 열) 그리드가있는 데스크톱 레이아웃 그리드를 만들었습니다. 이제, 내가 원하는

<div class="large-3 small-6 columns"> 
     <img src="http://placehold.it/250x250&text=Thumbnail" /> 
     <h6 class="panel">Description</h6> 
    </div> 

    <div class="large-3 small-6 columns"> 
     <img src="http://placehold.it/250x250&text=Thumbnail" /> 
     <h6 class="panel">Description</h6> 
    </div> 

    <div class="large-3 small-6 columns"> 
     <img src="http://placehold.it/250x250&text=Thumbnail" /> 
     <h6 class="panel">Description</h6> 
    </div> 

    <div class="large-3 small-6 columns"> 
     <img src="http://placehold.it/250x250&text=Thumbnail" /> 
     <h6 class="panel">Description</h6> 
    </div> 

<!-- End Thumbnails --> 

    </div>  
</div> 

<div class="row"> 
<div class="large-12 columns"> 
    <div class="row"> 

은 태블릿에 대한 두 개의 열 레이아웃, 및 모바일 1 열 레이아웃입니다. 기본적으로 그리드는 빈 공간을 채우기 위해 열의 크기를 조정하지만 고정 크기의 열을 원합니다. 내가 생각할 수있는

하나 개의 솔루션은 자바 스크립트를 사용하여 @media 쿼리를 기반으로 DOM 계층 구조를 업데이트하고 있습니다. 그러나 가능한 경우 CSS를 사용하여 더 나은 솔루션을 원합니다.

도움이 될 것입니다.

Answer 1

Foundation 4.3 이상을 사용하는 경우 현재 사용중인 작고 큰 것 외에도 medium grid을 사용할 수있는 추가 스타일 시트를 다운로드 할 수 있습니다. 이 기능은 기술적으로 실험적으로 나열되지만 11 월 21 일에 Foundation 5가 출시되면 표준으로 설정됩니다.

Answer 2

@media와 특정 화면 너비 (픽셀 단위)를 사용하면 div가 유동적이지만 화면에서 벗어나거나 허용되는 것보다 작아지지 않도록 최대 너비와 최소 너비를 지정할 수 있습니다.

가장 일반적인 장치의 너비를 지정해야합니다 ...

예 :

@media screen and (max-width: 980px) { 
    #your id {max-width:99%; min-width:75%;} 
    .image class {width:975px; height:450px;} 
} 
@media screen and (max-width: 650px) { 
    #your id {max-width:99%; min-width:75%;} 
    .image class {width:648px; height:290px;} 
} 
@media screen and (max-width: 480px) { 
    and so on... 
} 
@media screen and (max-width: 320px) { 
    and so on... 
} 
media screen and (max-width: 240px) { 
    and lastly... 
}