I want to put multiple divs in same row and if they cant fit to break to next line.I want this enter image description here instead of this enter image description here
.cardContainer {
display: flex;
}
.card {
min-width: 185.17px;
height: 88px;
border-radius: 8px;
background: red;
margin-right: 8px;
display: block;
}<div className="cardContainer">
<div className="card">A</div>
<div className="card">A</div>
<div className="card">A</div>
<div className="card">A</div>
<div className="card">A</div>
<div className="card">A</div>
<div className="card">A</div>
</div>>Solution :
.container {
display: flex;
flex-wrap: wrap;
gap: 10px 10px;
}
.item {
width: 20%;
height: 50px;
background-color: red;
}<div class='container'>
<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>