How to not wrap an item on a new row? [duplicate] - html

Question

This question already has answers here:
Is it possible for flex items to align tightly to the items above them?
(5 answers)
Closed 3 years ago.
As the picture describes, I want to wrap items as such.
This is my current HTML and CSS.
<div class="column-container">
<div class="col item">1 <- More text and thus taller than the other ones</div>
<div class="col item">2</div>
<div class="col item">3</div>
<div class="col item">4</div>
<div class="col item">5</div>
</div>
.column-container {
display: flex;
justify-content: center;
flex-flow: row wrap;
height: 100%;
}
.item {
height: fit-content;
min-width: 300px;
max-width: 300px;
margin: 10px;
}
Here's a fiddle as well..
https://jsfiddle.net/3Ly5zh4n/1

Answer 1

Flexbox is probably not the best choice for this since flexbox is used to display content next to each other either vertical or horizontal. I'd suggest using CSS Grid instead. It might be a new area for some, but it's a quite good choice for handling columns in CSS.
The following is an example of how it can be used. The method repeat(auto-fill, ...) fills the whole container with either a full fraction for each element, or the minimum width of 150px, which should be 300px in your case.
.column-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-template-rows: 1fr 1fr;
grid-gap: 10px;
height: 300px;
}
.item {
display: flex;
justify-content: center;
align-items: center;
font-size: 36px;
color: white;
background-color: red;
}
.item--first {
grid-row: 1 / span 2;
}
<div class="column-container">
<div class="item item--first">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
I'd suggest reading css tricks A Complete Guide to Grid for further information. Hope this helps a bit.

Answer 2

.column-container {
display: flex;
flex-flow: row wrap;
height: 100%;
}
.item {
height: fit-content;
min-width: 150px;
max-width: 150px;
margin: 10px;
border: 1px solid black;
}
<div style="display: flex;justify-content: center">
<div class="column-container">
<div class="col item" style="height: 100px;">1 <- More text and thus taller than the other ones</div>
</div>
<div class="column-container">
<div class="col item">2</div>
<div class="col item">3</div>
<div class="col item">4</div>
<div class="col item">5</div>
</div>
</div>

Answer 3

I think this this will do what you want. Its a simpler approach but it behaves the way you explain in your requested image.
HTML:
<div>
<ul>
<!-- I have set the height of this li to 300px to demo the concept. -->
<li class="col item" style="height: 300px">
1 More text and thus taller than the other ones.
</li>
<li class="col item">2</li>
<li class="col item">3</li>
<li class="col item">4</li>
<li class="col item">5</li>
</ul>
</div>
CSS:
ul {
padding: 0;
}
ul .item {
list-style: none;
float: left;
height: 100px;
width: 300px;
margin: 10px;
border: 1px solid red;
}
This should give you a result of:
Result layout
Hope this helps...