CODEWITHSUNDEEP
htmlcss
Vince M
Vince M

Reputation: 1196

Display divs in row with line return if too long

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>

Upvotes: 0

Views: 46

Answers (2)

Muhammad Tahir Ali
Muhammad Tahir Ali

Reputation: 415

You should give flex-wrap: wrap; to the parent element which will arrange the child element in the given width of the container and prevents overflow by creating a new row/column for the remaining elements.

Upvotes: 0

Moussa Bistami
Moussa Bistami

Reputation: 1087

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;

Upvotes: 3

Related Questions