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:
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