I need to set the height of each row to be equal according to the tallest content in each individual row.
For example doing:
c-column {
display: grid;
grid-auto-rows: 1fr;
}
Won't work as the first row would grow to tall. I have this markup as I need to make the columns responsive on mobile
.c-table {
display: flex;
border-radius: 10px;
box-shadow: 4px 8px 10px #cccccc;
background: transparent;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 1fr;
padding: 40px;
}
.c-column>div {
padding: 24px;
}
.c-column>div:nth-child(odd) {
background-color: #f4f2f0;
}<div class="c-table">
<div class="c-column">
<div>Lorem ipsum dolor sit amet</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in risus purus. Quisque ac leo pulvinar purus congue vestibulum. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in risus purus. Quisque ac leo pulvinar purus congue vestibulum. Integer hendreri</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur</div>
</div>
<div class="c-column">
<div>Lorem ipsum</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in risus purus. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in risus purus. Quisque ac leo pulvinar purus congue vestibulum. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
</div>
<div class="c-column">
<div>Lorem ipsum dolor sit amet</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in risus purus. Quisque ac leo pulvinar purus congue vestibulum. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in risus purus. Quisque ac leo pulvinar purus congue vestibulum. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in risus purus. Quisque ac leo pulvinar purus congue vestibulum. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
</div>
<div class="c-column">
<div>Lorem ipsum dolor sit amet</div>
<div>Curabitur in risus purus. Quisque ac leo pulvinar purus congue vestibulum. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
<div>Quisque ac leo pulvinar purus congue vestibulum. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in risus purus. Quisque ac leo pulvinar purus congue vestibulum. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
</div>
</div>The c-column elements are the grid children, so you can not make the grid rows adapt to the inner divs.
You can solve this changing the layout and removing the c-column elements.
Otherwise, you can get the same effect without changing the html, using display: contents; - See snippet
.c-table {
display: grid;
box-shadow: 4px 8px 10px #cccccc;
background: transparent;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: min-content;
padding: 40px;
}
.c-column {
display: contents; /* added */
}
.c-column>div {
padding: 24px;
}
.c-column>div:nth-child(odd) {
background-color: #f4f2f0;
}<div class="c-table">
<div class="c-column">
<div>Lorem ipsum dolor sit amet</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in risus purus. Quisque ac leo pulvinar purus congue vestibulum. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in risus purus. Quisque ac leo pulvinar purus congue vestibulum. Integer hendreri</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur</div>
</div>
<div class="c-column">
<div>Lorem ipsum</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in risus purus. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in risus purus. Quisque ac leo pulvinar purus congue vestibulum. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
</div>
<div class="c-column">
<div>Lorem ipsum dolor sit amet</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in risus purus. Quisque ac leo pulvinar purus congue vestibulum. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in risus purus. Quisque ac leo pulvinar purus congue vestibulum. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in risus purus. Quisque ac leo pulvinar purus congue vestibulum. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
</div>
<div class="c-column">
<div>Lorem ipsum dolor sit amet</div>
<div>Curabitur in risus purus. Quisque ac leo pulvinar purus congue vestibulum. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
<div>Quisque ac leo pulvinar purus congue vestibulum. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in risus purus. Quisque ac leo pulvinar purus congue vestibulum. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
</div>
</div>