Как я могу создать вложенную сетку фотографий в Foundation?

Question

JSFiddle: https://jsfiddle.net/s0m142c4/

Я пытаюсь использовать сетку фундамента для создания сетки фотографий.

Я хочу, чтобы это выглядело так со всеми блоками, представляющими фотографии. : :

Я, как предполагает документация основания, вставляет два столбца внутри одного столбца, а третий столбец содержит только его изображение.

HTML:

  <div class="row grid-row"> 
      <div class="large-6 columns"> 
       <div class="row"> 
        <div class="large-12 columns grid-img port"> 
         <img src="img/tile1-new.jpg" /> 
        </div> 
       </div> 
      </div> 
      <div class="large-6 columns"> 
       <div class="row"> 
        <div class="large-4 columns grid-img land"> 
         <img src="img/tile7.jpg" /> 
        </div> 
        <div class="large-4 columns grid-img land"> 
         <img src="img/tile3.jpg" /> 

        </div> 
       </div> 
       <div class="row"> 
        <div class="large-4 columns grid-img"> 
         <img src="img/tile7.jpg" /> 
        </div> 
        <div class="large-4 columns grid-img"> 
         <img src="img/tile3.jpg" /> 

        </div> 
       </div> 
      </div> 
      </div> 

CSS:

.grid-img{ 
    text-align: center; 
} 

.grid-img img{ 
    min-width:90%; 
} 

.grid-img.port img{ 
    min-width:100%; 
} 

.grid-row{ 
    height:600px; 
} 

Но это выходит, как это вместо:

Любая идея, как получить изображения, чтобы заполнить их вложенная столбцы и поддерживать мягкую сетку, как мой пример?

Answer 1

Это очень близко, вам нужно использовать 100% ширину для изображений, а затем изменить большие-4 столбца на большие-6, так как они никогда не собирались занимать 50% каждый, что им нужно было делать.

Теперь вы можете настроить нижний предел, чтобы макет работал немного лучше. Есть действительно уродливый способ сделать это, это Masonry.js или Isotope.js, он изменяет размеры контейнеров, но может быть немного тяжелым, чтобы делать то, что html и css могут делать очень хорошо. Смотри ниже:

/*.grid-img { 
 
    text-align: center; 
 
} 
 
.grid-img img { 
 
    min-width: 90%; 
 
} 
 
.grid-img.port img { 
 
    min-width: 100%; 
 
} 
 
.grid-row { 
 
    height: 600px; 
 
} 
 
*/ 
 

 
.grid-img img { 
 
    width: 100%; 
 
    margin-bottom: 2em; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.0/foundation.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.0/foundation.min.css" rel="stylesheet" /> 
 
<div class="row grid-row"> 
 
    <div class="large-6 columns"> 
 
    <div class="row"> 
 
     <div class="large-12 columns grid-img port"> 
 
     <img src="http://placehold.it/600x600" /> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="large-6 columns"> 
 
    <div class="row"> 
 
     <div class="large-6 columns grid-img land"> 
 
     <img src="http://placehold.it/600x600" /> 
 
     </div> 
 
     <div class="large-6 columns grid-img land"> 
 
     <img src="http://placehold.it/600x600" /> 
 

 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="large-6 columns grid-img"> 
 
     <img src="http://placehold.it/600x600" /> 
 
     </div> 
 
     <div class="large-6 columns grid-img"> 
 
     <img src="http://placehold.it/600x600" /> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>