CSS Grid Layout to fill the parent container with a position fixed div-CodePudding

In the following snippet I have a position: fixed div which is not part of the grid layout and I have a row-1 and main grid rows.

I would like the main to expand to the available space which I thought grid-template-rows: 6rem 1fr would do but it is not.

I'd also like there to be less of gap between the rows but grid-row-gap is not working in this example.

html {
  scroll-behavior: smooth;
  height: 100%;
}

body {
  text-rendering: optimizeSpeed;
  height: 100%;
}

#root {
  height: 100%;
}

.container {
  border: 10px solid green;
  background: #f1f1f1;
  display: grid;
  align-items: center;
  grid-template-areas:
    "row-1"
    "main";
  grid-template-rows: 6rem 1fr;
  grid-row-gap: 0;
}

.fixed {
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  z-index: 10;
  background: yellow;
  height: 3rem;
}

.row-1 {
  border: 10px solid blue;
  grid-area: row-1;
}

.main {
  border: 10px solid orange;
  grid-area: main;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Hello</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main id="root">
      <div >Fixed</div>
      <div >
        <div >Row 1</div>
        <div >main</div>
      </div>
    </main>
  </body>
</html>

CodePudding user response：

You could do it as below, and if you want .row-1 not covered by the fixed element, you could add for example padding-top:3rem to .container or to .row-1 itself.

body {
  text-rendering: optimizeSpeed;
  margin:0;
}

.fixed {
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  z-index: 10;
  background: yellow;
  height: 3rem;
}

.container {
  min-height: 100vh;
  border: 10px solid green;
  display: grid;
  grid-template-rows: 6rem 1fr;
}

.row-1 {
  border: 10px solid blue;
}

.main {
  border: 10px solid orange;
}

<main id="root">
  <div >Fixed</div>
  <div >
    <div >Row 1</div>
    <div >main</div>
  </div>
</main>