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

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