4

In a flexbox I can specify flex-grow:1 on a child to say it should take up the remaining space.

html, body {
  height: 100%
}
<div style="display:flex;flex-direction:column;height:100%">     
  <div style="background-color:yellow;height:50px"></div>
  <div style="background-color:red;flex-grow:1"></div>
</div>

Is it possible to do the same thing with css grid? i.e. to specify against a child item that it should use remaining space without defining it explicitly using grid-template-rows?

html, body {
  height: 100%
}
<div style="display:grid;grid-template-columns:auto;height:100%">
  <div style="background-color:yellow;height:50px"></div>
  <!-- what to use instead of flex-grow:1? -->
  <div style="background-color:red;flex-grow:1;"></div>
</div>

The real scenario relates to a grid containing a runtime defined number of columns, and a runtime defined set of children some of which may be display:none.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
lycandroid
  • 181
  • 10

1 Answers1

0

You could specify the row height with grid-template-rows: min-content auto;, which minimizes the first row and stretches the second.

html,
body {
  height: 100%
}
<div style="display:grid;grid-template-columns:auto;height:100%;grid-template-rows: min-content auto;">
  <div style="background-color:yellow;height:50px"></div>
  <div style="background-color:red;"></div>
</div>
Sebastian Speitel
  • 7,166
  • 2
  • 19
  • 38