My current project requires me to develop a search bar that displays search results in a grid format. The items should be arranged next to each other in two rows. If there are additional results, a button labeled +32 should be present to show all results.
Despite trying to use flexbox and flex-wrap to display new items on the next line when they don't fit on the current one, I am struggling to figure out how to only display the first two rows of results.
https://i.sstatic.net/0FKWAm.png
.container{
display: flex;
flex-wrap: wrap;
background-color: blue;
max-width: 15rem;
gap: 1rem;
}
.item{
background-color: red;
padding: 0 0.2rem;
}<div class="container">
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Helllooo</p>
</div>
<div class="item">
<p>Hel</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Test</p>
</div>
<div class="item">
<p>For</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Helllooo</p>
</div>
<div class="item">
<p>Hel</p>
</div>
<div class="item">
<p>Hello</p>
</div>
</div>