Реагирующая сетка с столбцами фиксированного размера

Question

Я новичок в Foundation Framework и только начал ее использовать. Я создаю отзывчивый дизайн с использованием Foundation Grid.

Я создал таблицу рабочего стола Сетка с сеткой 2x4 (строки, столбцы).

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

<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> 

Теперь, я хочу это две колонки макет для планшета, и 1 макет колонки для мобильных устройств. По умолчанию сетка изменяет размеры столбцов для заполнения пустого пространства, но мне нужны столбцы фиксированного размера.

одно решение я могу думать обновляет иерархию DOM на основе @media запросов с помощью JavaScript. Но я хочу лучшее решение, если возможно, используя CSS.

Любая помощь будет оценена по достоинству.

Answer 1

Если вы используете Foundation 4.3+, вы можете загрузить дополнительную таблицу стилей, которая позволяет использовать medium grid в дополнение к малым и большим, которые вы используете в настоящее время. Хотя эта функция технически указана как экспериментальная, она должна стать стандартной с выпуском Foundation 5 21 ноября.

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... 
}