Display divs in row with line return if too long

Issue

I have N div of the same fixed size (both width and height).
I want to display them in lines with a fixed sapcing vetween each other.
I N elements do not fit in one line, creates another line.
It would look like this:one line display with line return

I tried with display flex but it does not go to a new line.
I tried with grid but the number of columns depends on how many items can fit in the width.

  .item{
    width: 300px; 
    height: 400px; 
    background-color: grey; 
    margin: 10px;
  }
<body>
  <h1>Aleno</h1>

  <div style="display: flex;" >
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>

Solution

You’ll need the following attribute flex-wrap so that your elements create a new line automatically you can see more about that attribute here.
Of course you’ll need it on your parent element.

flex-wrap: wrap;

Answered By – Moussa Bistami

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published