CSS Grid auto collapse row & also set growth limit

Question

I'm trying to make a responsive layout footer for a google map. Because i have both a footer and a sidebar i'm trying to use grid to accomplish this. I have it nearly working except that the row refuses to collapse all the way because the google map doesn't actually take up any real space.

There are several partial solutions out there but they all fall flat attempting to do one thing or another. This solution gets close but setting an upper limit does not work. How do you collapse unused row in a CSS grid?

.grid {
  width: 500px;
  height: 500px;
  display: grid;
  grid-template-columns: [center]100fr [sidebar]auto;
  grid-template-rows: [center]100fr [footer]minmax(auto, 30%);
}
.center {
  background-color: blue;
  grid-column: center;
  grid-row: center;
}
.sidebar {
  background-color: red;
  grid-column: sidebar;
  grid-row: center / span 2;
}
.footer {
  background-color: orange;
  grid-column: center;
  grid-row: footer;
  overflow: auto;
}

<div class="grid">
  <div class="center">
    CENTER CONTENT
  </div>
  <div class="sidebar">
    SIDEBAR
  </div>
  <div class="footer">
     APPLES APPLES APPLES  APPLES APPLES APPLES  APPLES APPLES APPLES
     APPLES APPLES APPLES  APPLES APPLES APPLES  APPLES APPLES APPLES
     APPLES APPLES APPLES  APPLES APPLES APPLES  APPLES APPLES APPLES
  </div>
</div>

In the sample above, try deleting the inner content of footer and watch it not collapse.

How can i set an upper limit for an item and also allow it to collapse when empty (or smaller than max size).

score 0 · Answer 1 · answered May 11 '20 at 22:42

0

You can call the div if its empty and choose not to display it, or display it differently with the .div:empty. So something like this. Does this help?

 .footer:empty {
  display:none;
}

answered May 11 '20 at 22:42

John

5,132
1
6
17

Removing the footer doesn't let the grid collapse the region. – Chris Rice May 11 '20 at 22:49
Ok, I think I got it working how you want. Check it out here https://jsfiddle.net/68t5o3zp/ and add or delete the content in the footer to see it collapse. – John May 11 '20 at 23:17

score 0 · Answer 2 · answered May 11 '20 at 23:05

main {
  width: 500px;
  height: 500px;
  display: grid;
  grid-template-columns: 1fr auto;
}

section {
  display: flex;
  flex-direction: column;
}

.center {
  background-color: blue;
  flex: 1;
}

.sidebar {
  background-color: red;
}

.footer {
  background-color: orange;
  max-height: 30%;
  overflow: auto;
}

<main>
  <section>
    <div class="center">
      CENTER CONTENT
    </div>

    <div class="footer">
      APPLES APPLES APPLES APPLES APPLES APPLES APPLES APPLES APPLES APPLES APPLES APPLES APPLES APPLES APPLES APPLES APPLES APPLES APPLES APPLES APPLES APPLES APPLES APPLES APPLES APPLES APPLES
    </div>
  </section>
  <div class="sidebar">
    SIDEBAR
  </div>
</main>

CSS Grid auto collapse row & also set growth limit

2 Answers2