Prevent rows from filling the height of the grid container

user_1558598 0
Viewed 850

Similar—but not exactly—questions have been asked. In a container set to a min-height, the rows in the grid are 1) implicit, and 2) expanding vertically to the height of the container. I want each element to have its natural height.

In this CodePen you can see what I mean. If the height of the container: 80vh is removed, the elements resume their natural height, but my footer then moves up from the bottom of the portal.

Not sure what is going on here. Thoughts?

* {
  margin: 0;
}

main.chapter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 600px;
  margin: 20px auto;
  border: 1px solid #999;
  min-height: 80vh;
}

.column {
  grid-column: 1 / 5;
  background: beige;
  border: 1px solid #999;
}

form {
  grid-column: 1 / 3;
  background: beige;
  border: 1px solid #999;
}

.table-list {
  grid-column: 1 / 4;
  background: beige;
  border: 1px solid #999;
}

footer {
  background-color: tan;
  width: 100%;
  padding: 30px;
  min-height: 200px;
}
<main id="primary" class="chapter" itemprop="page">

  <div class="column">
    <h1>Test Page</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt imperdiet justo, ac rhoncus urna sollicitudin vitae. Duis eu dolor eu dui tempor cursus. Phasellus sit amet velit sit amet metus accumsan rhoncus. </p>

    <p>Below are links to a number of homilies preached at New Melleray and Our Lady of the Mississippi by members of our community.</p>
    </p>
  </div>

  <form>
    <p>Name: <br><input type="text"></p>
    <p>Gender: <br><input type="text"></p>
    <p>Age: <br><input type="text"></p>
    <p>Email: <br><input type="text"></p>
  </form>

  <div class="table-list">
    <table>
      <tr>
        <tr>
          <td>Suspendisse tortor ligula</td>
        </tr>
        <tr>
          <td>Suspendisse tortor ligula</td>
        </tr>
      </tr>
    </table>
  </div>

</main>

<footer id="colophon" class="site-footer">
</footer>

css-grid css
2 Answers

The default setting for implicit rows is grid-auto-rows: auto, which will cause rows to consume equal space.

Override the default with grid-auto-rows: min-content.

Add this to your code:

main.chapter {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 600px;
    margin: 20px auto;
    border: 1px solid #999;
    min-height: 80vh;
    grid-auto-rows: min-content; /* NEW */
}


* {
  margin: 0;
}

main.chapter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 600px;
  margin: 20px auto;
  border: 1px solid #999;
  min-height: 80vh;
  grid-auto-rows: min-content; /* NEW */
}

.column {
  grid-column: 1 / 5;
  background: beige;
  border: 1px solid #999;
}

form {
  grid-column: 1 / 3;
  background: beige;
  border: 1px solid #999;
}

.table-list {
  grid-column: 1 / 4;
  background: beige;
  border: 1px solid #999;
}

footer {
  background-color: tan;
  width: 100%;
  padding: 30px;
  min-height: 200px;
}
<main id="primary" class="chapter" itemprop="page">

  <div class="column">
    <h1>Test Page</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt imperdiet justo, ac rhoncus urna sollicitudin vitae. Duis eu dolor eu dui tempor cursus. Phasellus sit amet velit sit amet metus accumsan rhoncus. </p>

    <p>Below are links to a number of homilies preached at New Melleray and Our Lady of the Mississippi by members of our community.</p>
    </p>
  </div>

  <form>
    <p>Name: <br><input type="text"></p>
    <p>Gender: <br><input type="text"></p>
    <p>Age: <br><input type="text"></p>
    <p>Email: <br><input type="text"></p>
  </form>

  <div class="table-list">
    <table>
      <tr>
        <tr>
          <td>Suspendisse tortor ligula</td>
        </tr>
        <tr>
          <td>Suspendisse tortor ligula</td>
        </tr>
      </tr>
    </table>
  </div>

</main>

<footer id="colophon" class="site-footer">
</footer>

user_35972760

I tried display: flex and same issue—elements stretch vertically to fill up the container.

So, I wrapped the 3 elements with another div, removed the display: grid from the original wrapper and applied it to the new. Cheating? Maybe. However, it just might be the correct approach.

Original:

<main id="primary" class="chapter">
    <div class="column">...</div>
    <form>...</form>
    <div class="table-list">...</div>
</main>

main.chapter {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-row-gap: 0.5rem;
    max-width: 600px;
    margin: 20px auto;
    min-height: 80vh;
}

Revised:

<main id="primary" class="chapter">
    <div class="wrapper"> <!--added -->
        <div class="column">...</div>
        <form>...</form>
        <div class="table-list">...</div>
    </div>
</main>

main.chapter {
    max-width: 600px;
    margin: 20px auto;
    min-height: 80vh;
}
.wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-row-gap: 1.0rem;
}
user_15585980
Related