As you can see, the list-items in the first row have same height. But items in the second row have different heights. I want all items to have a uniform height.
Is there any way to achieve this without giving fixed-height and only using flexbox?
Here is my code
.list {_x000D_
display: flex;_x000D_
flex-wrap: wrap;_x000D_
max-width: 500px;_x000D_
}_x000D_
.list-item {_x000D_
background-color: #ccc;_x000D_
display: flex;_x000D_
padding: 0.5em;_x000D_
width: 25%;_x000D_
margin-right: 1%;_x000D_
margin-bottom: 20px;_x000D_
}_x000D_
.list-content {_x000D_
width: 100%;_x000D_
}<ul class="list">_x000D_
<li class="list-item">_x000D_
<div class="list-content">_x000D_
<h2>box 1</h2>_x000D_
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>_x000D_
</div>_x000D_
</li>_x000D_
<li class="list-item">_x000D_
<div class="list-content">_x000D_
<h3>box 2</h3>_x000D_
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>_x000D_
</div>_x000D_
</li>_x000D_
_x000D_
<li class="list-item">_x000D_
<div class="list-content">_x000D_
<h3>box 2</h3>_x000D_
<p>Lorem ipsum dolor</p>_x000D_
</div>_x000D_
</li>_x000D_
_x000D_
<li class="list-item">_x000D_
<div class="list-content">_x000D_
<h3>box 2</h3>_x000D_
<p>Lorem ipsum dolor</p>_x000D_
</div>_x000D_
</li>_x000D_
<li class="list-item">_x000D_
<div class="list-content">_x000D_
<h1>h1</h1>_x000D_
</div>_x000D_
</li>_x000D_
</ul>The answer is
You can accomplish that now with display: grid:
.list {_x000D_
display: grid;_x000D_
overflow: hidden;_x000D_
grid-template-columns: repeat(3, 1fr);_x000D_
grid-auto-rows: 1fr;_x000D_
grid-column-gap: 5px;_x000D_
grid-row-gap: 5px;_x000D_
max-width: 500px;_x000D_
}_x000D_
.list-item {_x000D_
background-color: #ccc;_x000D_
display: flex;_x000D_
padding: 0.5em;_x000D_
margin-bottom: 20px;_x000D_
}_x000D_
.list-content {_x000D_
width: 100%;_x000D_
}<ul class="list">_x000D_
<li class="list-item">_x000D_
<div class="list-content">_x000D_
<h2>box 1</h2>_x000D_
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>_x000D_
</div>_x000D_
</li>_x000D_
<li class="list-item">_x000D_
<div class="list-content">_x000D_
<h3>box 2</h3>_x000D_
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>_x000D_
</div>_x000D_
</li>_x000D_
_x000D_
<li class="list-item">_x000D_
<div class="list-content">_x000D_
<h3>box 2</h3>_x000D_
<p>Lorem ipsum dolor</p>_x000D_
</div>_x000D_
</li>_x000D_
_x000D_
<li class="list-item">_x000D_
<div class="list-content">_x000D_
<h3>box 2</h3>_x000D_
<p>Lorem ipsum dolor</p>_x000D_
</div>_x000D_
</li>_x000D_
<li class="list-item">_x000D_
<div class="list-content">_x000D_
<h1>h1</h1>_x000D_
</div>_x000D_
</li>_x000D_
</ul>Although the grid itself is not flexbox, it behaves very similar to a flexbox container, and the items inside the grid can be flex.
The grid layout is also very handy in the case you want responsive grids. That is, if you want the grid to have a different number of columns per row you can then just change grid-template-columns:
grid-template-columns: repeat(1, 1fr); // 1 column
grid-template-columns: repeat(2, 1fr); // 2 columns
grid-template-columns: repeat(3, 1fr); // 3 columns
and so on...
You can mix it with media queries and change according to the size of the page.
Sadly there is still no support for container queries / element queries in the browsers (out of the box) to make it work well with changing the number of columns according to the container size, not to the page size (this would be great to use with reusable webcomponents).
More information about the grid layout:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
Support of the Grid Layout accross browsers:
You can with flexbox:
ul.list {
padding: 0;
list-style: none;
display: flex;
align-items: stretch;
justify-items: center;
flex-wrap: wrap;
justify-content: center;
}
li {
width: 100px;
padding: .5rem;
border-radius: 1rem;
background: yellow;
margin: 0 5px;
}<ul class="list">
<li>title 1</li>
<li>title 2<br>new line</li>
<li>title 3<br>new<br>line</li>
</ul>for same height you should chage your css "display" Properties. For more detail see given example.
.list{_x000D_
display: table;_x000D_
flex-wrap: wrap;_x000D_
max-width: 500px;_x000D_
}_x000D_
_x000D_
.list-item{_x000D_
background-color: #ccc;_x000D_
display: table-cell;_x000D_
padding: 0.5em;_x000D_
width: 25%;_x000D_
margin-right: 1%;_x000D_
margin-bottom: 20px;_x000D_
}_x000D_
.list-content{_x000D_
width: 100%;_x000D_
}<ul class="list">_x000D_
<li class="list-item">_x000D_
<div class="list-content">_x000D_
<h2>box 1</h2>_x000D_
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>_x000D_
</div>_x000D_
</li>_x000D_
<li class="list-item">_x000D_
<div class="list-content">_x000D_
<h3>box 2</h3>_x000D_
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>_x000D_
</div>_x000D_
</li>_x000D_
_x000D_
<li class="list-item">_x000D_
<div class="list-content">_x000D_
<h3>box 2</h3>_x000D_
<p>Lorem ipsum dolor</p>_x000D_
</div>_x000D_
</li>_x000D_
_x000D_
<li class="list-item">_x000D_
<div class="list-content">_x000D_
<h3>box 2</h3>_x000D_
<p>Lorem ipsum dolor</p>_x000D_
</div>_x000D_
</li>_x000D_
<li class="list-item">_x000D_
<div class="list-content">_x000D_
<h1>h1</h1>_x000D_
</div>_x000D_
</li>In your case height will be calculated automatically, so you have to provide the height
use this
.list-content{
width: 100%;
height:150px;
}
If you know the items you are mapping through, you can accomplish this by doing one row at a time. I know it's a workaround, but it works.
For me I had 4 items per row, so I broke it up into two rows of 4 with each row height: 50%, get rid of flex-grow, have <RowOne /> and <RowTwo /> in a <div> with flex-column. This will do the trick
<div class='flexbox flex-column height-100-percent'>
<RowOne class='flex height-50-percent' />
<RowTwo class='flex height-50-percent' />
</div>
you can do it by fixing the height of "P" tag or fixing the height of "list-item".
I have done by fixing the height of "P"
and overflow should be hidden.
.list{_x000D_
display: flex;_x000D_
flex-wrap: wrap;_x000D_
max-width: 500px;_x000D_
}_x000D_
_x000D_
.list-item{_x000D_
background-color: #ccc;_x000D_
display: flex;_x000D_
padding: 0.5em;_x000D_
width: 25%;_x000D_
margin-right: 1%;_x000D_
margin-bottom: 20px;_x000D_
}_x000D_
.list-content{_x000D_
width: 100%;_x000D_
}_x000D_
p{height:100px;overflow:hidden;}<ul class="list">_x000D_
<li class="list-item">_x000D_
<div class="list-content">_x000D_
<h2>box 1</h2>_x000D_
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>_x000D_
</div>_x000D_
</li>_x000D_
<li class="list-item">_x000D_
<div class="list-content">_x000D_
<h3>box 2</h3>_x000D_
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>_x000D_
</div>_x000D_
</li>_x000D_
_x000D_
<li class="list-item">_x000D_
<div class="list-content">_x000D_
<h3>box 2</h3>_x000D_
<p>Lorem ipsum dolor</p>_x000D_
</div>_x000D_
</li>_x000D_
_x000D_
<li class="list-item">_x000D_
<div class="list-content">_x000D_
<h3>box 2</h3>_x000D_
<p>Lorem ipsum dolor</p>_x000D_
</div>_x000D_
</li>_x000D_
<li class="list-item">_x000D_
<div class="list-content">_x000D_
<h1>h1</h1>_x000D_
</div>_x000D_
</li>_x000D_
</ul>This seems to be working in cases with fixed parent height (tested in Chrome and Firefox):
.child {
height : 100%;
overflow : hidden;
}
.parent {
display: flex;
flex-direction: column;
height: 70vh; // ! won't work unless parent container height is set
position: relative;
}
If it's not possible to use grids for some reason, maybe it's the solution.
No, you can't achieve that without setting a fixed height (or using a script).
Here are 2 answers of mine, showing how to use a script to achieve something like that:
Source: Stackoverflow.com