Milligram: Problema con la cuadrícula

Creado en 25 feb. 2016 · 5Comentarios · Fuente: milligram/milligram

Hola, trabajé con grid y tengo una página de miembros que tiene más de 100 tarjetas de perfil. Creé una fila con la columna 25 pero todo va en una línea.

¿Hay alguna solución para eso? los necesito como 4 en fila y luego a continuación, ahora están todos en una línea, mi código es así

<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

Fuente

kresogalic8

Comentario más útil

Necesita agregar la clase de envoltura de fila:

<div class="row row-wrap">

Sin embargo, tenga en cuenta que su uso limita aún más la compatibilidad con el navegador.

ImadJomaa en 4 mar. 2016

👍3

Todos 5 comentarios

Necesita agregar la clase de envoltura de fila:

<div class="row row-wrap">

Sin embargo, tenga en cuenta que su uso limita aún más la compatibilidad con el navegador.

ImadJomaa en 4 mar. 2016

👍3

Al tener el mismo problema, agregar un ajuste de fila no parece funcionar:

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

Sin embargo, anular manualmente el estilo hace que se comporte.

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

No sé lo suficiente sobre CSS para comprender por qué no se comporta como se esperaba.

steveoc64 en 5 mar. 2016

Hubo un descuido de mi parte, debería haber sido:

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

Aunque, esto no parece funcionar debido a que la herencia aparente de la propiedad de visualización es bloquear en lugar de flex. Quizás el diseño previsto fue el mencionado anteriormente. En otras palabras, su solución fue probablemente la solución deseada.

ImadJomaa en 7 mar. 2016

Gracias Imad ... la "solución" funciona por ahora, pero también intentaré hacer que la intención inicial funcione.

Suena razonable que class = "row row-wrap" funcione como se esperaba, sin tener que anidar otro div debajo.

... otro trabajo para un día lluvioso;)

steveoc64 en 8 mar. 2016

Hola @ kresogalic8 ¿Podrías solucionar el problema? # 100

Por ahora cerraré este tema. Avíseme si hay algo más en lo que podamos ayudar y lo reabriré.