Question

我是网格的新手，现在基本上是对Doodle日历进行反向工程。我正在使用网格容器包含我的所有物品。问题在于，在网格项目的最后一列之后，似乎还有一个额外的列可以占据屏幕的其余部分。

这是它的样子：

example

我希望能够删除右侧的多余空间，以便网格仅占用网格项目的空间。

这是我的HTML：

<body>
    <div id="grid-container">
        <div class="grid-item"></div>
        <div class="grid-item" id="case_participants"> 0 participants</div>
    </div>
</body>

这是我的CSS：

#grid-container {
  display: grid;
  grid-template-columns: 216px repeat(var(--colNum), 72px);
  background-color: white;
  border: 2px solid grey;
  padding: 0px;
}

.grid-item {
  background-color: white;
  border: 1px solid grey;
  font-size: 30px;
  text-align: center;
}

其余项目都是使用JavaScript生成的。

Answer 1

您的网格右边有空间，因为默认情况下，网格是占其父级（在此情况下为主体）100％宽度的块元素。将容器的样式更改为display: inline-grid;，以使其宽度与内容的大小相同。下面的示例片段：

:root {
  --colNum: 4;
}

#grid-container {
  display: inline-grid;
  grid-template-columns: 216px repeat(var(--colNum), 72px);
  background-color: white;
  border: 2px solid grey;
  padding: 0px;
}

.grid-item {
  background-color: white;
  border: 1px solid grey;
  font-size: 20px;
  text-align: center;
  padding: 10px;
}

<div id="grid-container">
  <div class="grid-item">names</div>
  <div class="grid-item">check</div>
  <div class="grid-item">check</div>
  <div class="grid-item">check</div>
  <div class="grid-item">check</div>
</div>

网格容器无缘无故在我的网格项之后有额外的列

1 个答案: