Question

我想构建一个布局，它将有一个旁边面板，它将跨越所有网格项的整个高度，包括自动生成的行。由于我不知道页面上会出现多少项目，因此我无法在网格属性中指定确切的列数和行数。

状态1：网格有5个项目 - 侧栏列高度为2行

状态1：网格有7个项目 - 侧栏栏高度为3行

无论何时将新项目添加到网格中，目标都是自动扩展。

我尝试使用

grid-column-start: 3;
grid-row: 1 / -1;

向右移动并使其跨越所有可用行，但由于我没有定义网格行，因此我只能跨越1行而不是所有自动生成的行

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  
}

.item {
  background-color: green;
  color: #fff;
}

aside {
  grid-column-start: 3;
  grid-row: 1 / -1;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="grid">
    <aside>Aside</aside>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
  </div>
</body>
</html>

如何让它跨越所有自动生成的行？

CSS网格布局：跨越自动生成的行的全高列

0 个答案: