Controlling height of adjacent column in css grid

Question

I have a job site designed with with css grid. The job listings and email subscribe are divided bygrid-template-columns: (3fr, 1fr), the problem is is that the email subscribe box is the same height as the job listings (if there are 10 listings for example this is quite a large email subscribe box), how can I change this? (Note: jsfiddle included at bottom will make it much more clear and I have tried to set a height value on #item2 and this did not work) Thanks in advance!

.grid {
  display: grid;
  grid-template-columns: 3fr 1fr;
}

#item1 {
  margin-left: 15px;
}

#item1>h1 {
  text-align: center;
}

#list_of_jobs {
  list-style: none;
}

#item2 {
  text-align: center;
  margin-right: 15px;
  border: 3px solid #eeeeee;
}

<div class="grid">
  <div id="item1">
    <h1>Jobs in 10529</h1>
    <table>
      <tbody>
        <div>
          <ul id="list_of_jobs">
            <li>
              <h2><a href="#">Job 1</a></h2>
              <p class="lead"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus itaque minus corporis earum consequuntur unde saepe consequatur commodi harum ut. </p>
            </li>
            <li>
              <h2><a href="#">Job 2</a></h2>
              <p class="lead"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus itaque minus corporis earum consequuntur unde saepe consequatur commodi harum ut. </p>
            </li>
            <li>
              <h2><a href="#">Job 3</a></h2>
              <p class="lead"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus itaque minus corporis earum consequuntur unde saepe consequatur commodi harum ut. </p>
            </li>
            <li>
              <h2><a href="#">Job 4</a></h2>
              <p class="lead"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus itaque minus corporis earum consequuntur unde saepe consequatur commodi harum ut. </p>
            </li>
          </ul>
        </div>
      </tbody>
    </table>
  </div>
  <div id="item2">
    <form>
      <p>Subscribe to recieve job alerts near 105</p>
      <!-- query stores zip code-->
      <input type="text" placeholder="Email">
      <button class="btn" type="submit">Subscribe</button>

    </form>
  </div>
</div>
<!-- close grid div-->

http://jsfiddle.net/bmy0s93k/2/

Michael Benjamin · Accepted Answer · 2018-07-09T21:27:51.727

Add this to your code:

#item2 {
   align-self: start;
}

revised fiddle

A default setting in a grid container (like in a flex container) is align-items: stretch. This means that grid items (like flex items) will stretch the full length of the relevant axis in the container.

You need to override the default.

References:

Controlling height of adjacent column in css grid

1 Answers1