Making the content inside grid items equal height in CSS Grid

Question

I am trying to figure out how to get two columns of my grid the same height. Here is what I am after:

xxxxxxxxxxxxxxxxx   xxxxxxxxxxxxxxxxxxx 

x qqqqqqq         


        

Answer 1

use display property flex with item height auto

for example

.flex-container {
display: flex;
width: 400px;
height: auto;

}

.flex-item {
background: red;
width: 100px;
height: auto;
margin: 10px;

}