Milligram: Problema com grade

Criado em 25 fev. 2016 · 5Comentários · Fonte: milligram/milligram

Olá, trabalhei com grade e tenho uma página de membros com mais de 100 cartões de perfil. Eu criei uma linha com a coluna 25, mas tudo vai em uma linha.

Há alguma solução para isso? eu preciso deles como 4 em linha e a seguir abaixo, agora eles estão todos em uma linha, meu código é assim

<div class="row">
  <div class="column column-25"></div>
  <div class="column column-25"></div>
   <div class="column column-25"></div>
  <div class="column column-25"></div>
   <div class="column column-25"></div>
  <div class="column column-25"></div>
   <div class="column column-25"></div>
  <div class="column column-25"></div>
</div>

bug question

Fonte

kresogalic8

Comentários muito úteis

Você precisa adicionar a classe de quebra de linha:

<div class="row row-wrap">

Observe, entretanto, que usá-lo limita ainda mais o suporte do navegador.

ImadJomaa em 4 mar. 2016

👍3

Todos 5 comentários

Você precisa adicionar a classe de quebra de linha:

<div class="row row-wrap">

Observe, entretanto, que usá-lo limita ainda mais o suporte do navegador.

ImadJomaa em 4 mar. 2016

👍3

Tendo o mesmo problema, a adição de quebra de linha não parece funcionar:

http://codepen.io/steveoc64/pen/WwQgxG

No entanto, substituir manualmente o estilo faz com que ele se comporte.

<div class="row" style="flex-wrap: wrap">

Não sei o suficiente sobre CSS para saber por que ele não se comporta conforme o esperado.

steveoc64 em 5 mar. 2016

Houve um descuido da minha parte, deveria ter sido:

<div class="row">
    <div class="row-wrap">
        ....
    </div>
</div>

Embora, isso não pareça funcionar devido à herança aparente da propriedade de exibição ser block em vez de flex. Talvez o design pretendido fosse o mencionado acima. Em outras palavras, sua solução provavelmente foi a solução pretendida.

ImadJomaa em 7 mar. 2016

Obrigado, Imad ... a "solução alternativa" resolve por enquanto, mas também tentarei fazer com que a intenção inicial funcione também.

Parece razoável ter class = "row row-wrap" com o desempenho esperado, sem ter que aninhar outro div por baixo.

... outro trabalho para um dia chuvoso;)

steveoc64 em 8 mar. 2016

Oi @ kresogalic8 Você poderia resolver o problema? # 100

Por enquanto, encerrarei este problema. Informe se houver mais alguma coisa que possamos ajudar e eu reabrirei.