Milligram: Problem with grid

Created on 25 Feb 2016 · 5Comments · Source: milligram/milligram

Hello, i worked with grid and i have members page which have 100+ profile cards. I created one row with column-25 but all goes in one line.

Is there any solution for that? i need them like 4 in row then next below, now they are all in one line, my code goes like this

<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

Source

kresogalic8

Most helpful comment

You need to add the row-wrap class:

<div class="row row-wrap">

Do note however, that using it further limits browser support.

ImadJomaa on 4 Mar 2016

👍3

All 5 comments

You need to add the row-wrap class:

<div class="row row-wrap">

Do note however, that using it further limits browser support.

ImadJomaa on 4 Mar 2016

👍3

Having the same issue, adding row-wrap doesnt seem to work :

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

Manually overriding the style makes it behave though.

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

I dont know enough about CSS to grok why it doesnt behave as expected.

steveoc64 on 5 Mar 2016

There was an oversight on my part, it should have been:

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

Albeit, this doesn't seem to work due to the appeared inheritance of the display property being block rather than flex. Perhaps the intended design was that aforementioned. In other words, your solution was probably the intended solution.

ImadJomaa on 7 Mar 2016

Thanks Imad ... the "workaround" does the trick for now, but I will also have a go at trying to make the initial intent work as well.

Sounds reasonable to have class="row row-wrap" perform as expected, without having to nest another div underneath.

... another job for a rainy day ;)

steveoc64 on 8 Mar 2016

Hi @kresogalic8 You could solve the problem? #100

For now I will close this issue. Let me know if there is anything else we can help and I will reopen.