1

I've managed to create a very simple layout so that the <div class="content"> fills to the remaining available height.

HTML:

<!DOCTYPE html>
<html>
<head></head>
<body>
    <div class="page">
        <div class="header">HEADER</div>
        <div class="nav">NAV</div>
        <div class="content">CONTENT</div>
        <div class="footer">FOOTER</div>
    </div>
</body>
</html>

CSS:

.page {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    height: 100vh;
}

In the feature, i could add a new row, like so

<div class="page">
    <div class="header">HEADER</div>
    <div class="nav">NAV</div>
    <div class="filter">FILTER</div>
    <div class="content">CONTENT</div>
    <div class="footer">FOOTER</div>
</div>

And then, i will need to change again the CSS

grid-template-rows: auto auto auto 1fr auto;

So, is there a way to tell CSS to make all of the rows auto, including those added in the future, but just keep <div class="content"> to 1fr

That way i can add rows dynamically without the need to keep changing the css. Thanks

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Marco
  • 2,687
  • 7
  • 45
  • 61
  • 1
    There's really no way to target a row in a grid container based on a grid item's attributes. But since you're working with a single-column grid, why not use flexbox? It's clean and simple. https://jsfiddle.net/5ms30dwr/ – Michael Benjamin Jan 23 '18 at 23:51

0 Answers0