网格垂直滚动

Question

我有一个左右嵌套的网格。我希望我的左侧网格占据浏览器的整个高度并固定在适当的位置。我希望我的右侧网格在向其添加内容时获得垂直滚动条。

body{ margin: 0 0; padding: 0 0 ; }

.grid {
  display: grid;
  grid-template-columns: 25% 75%;
  grid-gap: 10px;
  grid-auto-rows: 500px;
}

.left{
  display: grid;
  grid-template-rows : repeat(3,1fr);
  grid-gap : 5px;
  grid-auto-rows: 500px;
}

.one{ background: violet; }

.two{ background: indigo; }

.three { background: blue; }

.right{
  display: grid;
  grid-template-rows: repeat(4,1fr);
  grid-gap : 5px;
}

.four{ background: green; }

.five{ background: yellow; }

.six { background: orange; }

.seven{ background: red}

<body>
    <div class="grid">
        <div class="left">
            <div class="one">1</div>
            <div class="two">2</div>
            <div class="three">3</div>
        </div>
        <div class="right">
            <div class="four">4</div>
            <div class="five">5</div>
            <div class="six">6</div>
            <div class="seven">7</div>
        </div>
    </div>
</body>

Answer 1

如果有grid-auto-rows: 500px，你打算如何让左边的网格占据全高并保持固定？这在很多情况下会溢出容器。

这是您的代码的修订版，具有固定的 left-side 网格，并且 grid-auto-rows: 500px 在 right-side 网格上具有 overflow: auto。

.grid {
  display: grid;
  grid-template-columns: 1fr 3fr; /* switched from percentages for spacing efficiency */
  grid-gap: 10px;
  /* grid-auto-rows: 500px; */
  height: 100vh; /* new */
}

.left {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 5px;
  /* grid-auto-rows: 500px; */
}

.right {
  display: grid;
  /* grid-template-rows: repeat(4, 1fr); */
  grid-gap: 5px;
  grid-auto-rows: 500px; /* new */
  overflow: auto; /* new */
}

.one   { background: violet; }
.two   { background: indigo; }
.three { background: blue;   }
.four  { background: green;  }
.five  { background: yellow; }
.six   { background: orange; }
.seven { background: red     }
body   { margin: 0 0; padding: 0 0; }

<div class="grid">
  <div class="left">
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
  </div>
  <div class="right">
    <div class="four">4</div>
    <div class="five">5</div>
    <div class="six">6</div>
    <div class="seven">7</div>
  </div>
</div>

网格垂直滚动

Grid Vertical Scrolling

css

frontend

vertical-scrolling

css-grid