Семантический интерфейс: карты рядом друг с другом?

Question

Проблема заключается не в том, чтобы показывать рядом друг с другом, они все оправданы слева и помещают друг под друга. Я хочу, чтобы они прошли весь путь слева направо и завернули в следующий ряд, если другая карта не подойдет. Способ отображения: flex работает.

Есть ли какой-либо «семантический» способ сделать это? Единственное, о чем я могу думать, это разместить в сетке дополнительный div, который будет гибким контейнером.

Я использую Meteor и Blaze, но я считаю, что это не имеет никакого отношения к этому. Вопрос заключается в семантическом интерфейсе и HTML/CSS.

Мой HTML выглядит следующим образом:

<div class="ui grid"> 
    <div class="two wide column"> 
    </div> 

    <div class="twelve wide column"> 
     {{> card}} 
     {{> card}} 
     {{> card}} 
     {{> card}} 
     {{> card}} 
     {{> card}} 
    </div> 

    <div class="two wide column"> 
    </div> 
</div> 

Где каждый шаблон карты:

<div class="ui card"> 
    <div class="image"> 
     <img src="http://placehold.it/256x256"> 
    </div> 
    <div class="content"> 
      <a class="header">Kristy</a> 
     <div class="meta"> 
      <span class="date">Joined in 2013</span> 
     </div> 
     <div class="description"> 
      Kristy is an art director living in New York. 
     </div> 
    </div> 
    <div class="extra content"> 
     <a> 
      <i class="user icon"></i> 
      22 Friends 
     </a> 
    </div> 
</div> 

Answer 1

<div class="ui four doubling stackable cards"> 
    {{> card}} 
    {{> card}} 
    {{> card}} 
    {{> card}} 
    {{> card}} 
    {{> card}} 
    {{> card}} 
</div> 

И для карты все, что вам нужно сделать, это изменить ui card к ui fluid card для карты расширения до максимального доступного пространства.

Это то, что я смог найти. Он работает очень хорошо, так же, как мне нужно, чтобы он работал.

doubling дает приятный эффект от 4 до 2 карт в строке на средних экранах, в то время как stacking будет идти от 2 до 1 за строку на маленьких экранах, таких как телефоны для максимального удовольствия от просмотра.

Спасибо всем, ваши ответы помогли найти это решение. Я буду отмечать это как ответ, потому что я считаю, что это самый «семантический» способ сделать это.

Answer 2

Вы можете совать каждую карту в свой столбец и окружить его с помощью наращиваемых сетки ->http://semantic-ui.com/collections/grid.html#stackable

<div class="ui stackable twelve column grid"> 
    {{> card}} 
    {{> card}} 
    {{> card}} 
    {{> card}} 
    {{> card}} 
    {{> card}} 
</div> 

и каждая карта окружена

<div class="column"> 
    ... content 
</div>