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

【问题标题】：Grid container has extra column after my grid items for no reason网格容器无缘无故在我的网格项目之后有额外的列
【发布时间】：2019-02-26 22:53:48
【问题描述】：

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

这就是它的样子：

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

这是我的 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 生成的。

【问题讨论】：

标签： html css layout css-grid

【解决方案1】：

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

: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>

【讨论】：