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

You can manually set the same size if grid doesn't change (you don't insert new elements dynamically or change existing ones vertical size)

.companyInfoBox {
    padding: 20px;
    border: 1px solid #666;
    height: 265px;
}

It's simple and works (taking into accounts restrictions listed above): pen

Answer 2

Those grid items are already the same height. They are both the height of the second row, which is 1fr, as defined by grid-template-rows on the grid container.

If you put a border around those two items (.companyInfoContainer & .contactInfoContainer), you'll see what I mean.

revised demo

It seems that you want the bordered children of the grid items (.companyInfoBox and .contactInfoBox) to consume all available height.

Since the grid items are not also grid containers, you can't use grid properties on the children.

An easy and efficient solution would be to make the grid items flex containers. Then you can apply flex properties to the children, which can make them consume free space.

.companyInfoContainer {
   display: flex;
   flex-direction: column;
}

.companyInfoBox {
   flex: 1;
 }

.contactInfoContainer {
  display: flex;
  flex-direction: column;
}

.contactInfoBox {
   flex: 1
}

revised demo

More details: Descendant element not responding to grid properties

Answer 3

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;

}