2 problems about grid(col)

  1. how can i break the line when the number of col is up to 5? It seems not the case of responsive grid because responsive grid turns each col into a row instead of 5 cols into a row.
  2. how can i add badge to a col? I’ve added has-badge but it seems that it doesn’t work.



How does this work?

For wrapping content with flex box, you should check out the flex-wrap property. If you want to play around with it, theres this awesome GUI tool that will generate the prefixed versions of flex box

And by “add badge”, what do you mean?


Thx you a lot!! Ur codepen help me out!!
and what i mean is sth like the picture.


Ah alright, good question :smile:. Once you get your images in place and such, its probably more of just applying some css to get things positioned correctly.

I think @Calendee is more of an expert on that, I know he’s used them before in his app.