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 qqqqqqqqqqqqq x    x qqqqqqqqqqqqqqq x 

x qqqqqqqqqqqqq x    x qqqqqqqqqqqqqqq x 

x               x    x qqqqqqqqqqqqqqq x 

x               x    x qqqqqqqqqqqqqqq x 

xxxxxxxxxxxxxxxxx   xxxxxxxxxxxxxxxxxxx

This is where the x's represent a border of a grid (display: grid) and the q's are labels and input fields. Here is all the code and a link to the same on codepen.

.container {
    font-family: Arial, Helvetica, Sans-Serif;
    color: #666;
    font-size: 12px;
    position: absolute;
    width: 100%;
    margin: 0 auto;
    border: 1px solid #666;
    background-color: #fff;
    height: 100%;
}

.outerGrid {
  display: grid;
  grid-template-columns: 1fr 2fr 3fr 1fr;
  grid-template-rows: 80px 1fr 1fr 30px;
  grid-gap: 20px;
  grid-template-areas: 
    "title title title title" 
    ". companyInfo contactInfo . "
    ". demoInfo demoInfo . " 
    "footer footer footer footer";
}

.companyInfoContainer {
  grid-area: companyInfo;
}

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

.contactInfoContainer {
    grid-area: contactInfo;
}

.contactInfoBox {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 20px;
    grid-template-areas: 'contactLeft contactRight';
    border: 1px solid #666;
    padding: 20px;
}

.titleRow {
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  align-content: flex-start;
  margin-bottom: 10px;
  color: #333;
  font-size: 16px;
}

.formControl {
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    display: block;
    height: 37px;
    padding: 5px;
    line-height: 1.25;
    background-color: #fff;
    width: 100%;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    margin-bottom: 5px;
    background-image: none;
}

.formTitleTop {
    margin-bottom: 10px;
}

.formTitle {
    margin: 10px 0;
}

...and the html:

<div class='container'>
  <div class="outerGrid">
    <div class="companyInfoContainer">
      <div class="titleRow">
        <div>Company Information</div>
        <div>* Required</div>
      </div>
      <div class="companyInfoBox">
        <div class="formTitleTop">Company Name*</div><input type="text" class="formControl" value="">
        <div class="formTitle">Website (leave blank if not website)</div>
        <input type="text" class="formControl" value=""></div>
    </div>
    <div class="contactInfoContainer">
      <div class="titleRow">
        <div>Contact Information</div>
        <div class="required">* Required</div>
      </div>
      <div class="contactInfoBox">
        <div class="contactLeft">
          <div class="formTitleTop">First Name*</div><input type="text" class="formControl" value="">
          <div class="formTitle">Last Name*</div><input type="text" class="formControl" value="">
          <div class="formTitle">Role*</div><input type="text" class="formControl" value=""><input type="button" value="Add Additional Contacts"></div>
        <div class="contactRight">
          <div class="formTitleTop">Phone Number*</div><input type="text" class="formControl" value="">
          <div class="formTitle">Mobile Phone Number</div><input type="text" class="formControl" value="">
          <div class="formTitle">Email Address*</div><input type="text" class="formControl" value=""></div>
      </div>
    </div>
  </div>
</div>

codepen: https://codepen.io/GuitarJ/pen/QqZRYR

I can't seem to get the left column to stretch to the height of the right col's height (which I think is the row height too. I was hoping that css grids would have a way to do this, but its hard to search for this exact issue.

I also tried setting the height to 100%, but then it didn't respect the grid-gap and went down too far.

How can I make the left side be the row height?

Michael Benjamin · Accepted Answer · 2017-10-25T18:05:28.917

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

Brilliant! Worked like a charm! Seems I was not thinking about it correctly, you are right though, I was thinking the child boxes were top level in the grid which they clearly are not. Once I understood that, it all made sense! — Jeff, Oct 24 '17 at 19:06

score 0 · Answer 2 · answered Oct 13 '17 at 20:18

0

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;

}

answered Oct 13 '17 at 20:18

Darkpiece

111
5

This didn't work for me, but I added a full layout sample with codepen link, so maybe that will help. – Jeff Oct 16 '17 at 12:06
I guess I got it what you r looking for you can go with this approach using flex. https://codepen.io/saurabhsharma722/pen/oGQqBp – Darkpiece Oct 17 '17 at 06:35
I want to stick with display: grid. I can always set the height the way @dantethesmith stated, but I was hoping for a much less manual way. If I have dynamic rows, that would not work... – Jeff Oct 17 '17 at 13:17

score 0 · Answer 3 · answered Oct 16 '17 at 12:35

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

Making the content inside grid items equal height in CSS Grid

3 Answers3

Linked

Related