Html 网格容器在“我的网格项”之后无缘无故有额外的列_Html_Css_Layout_Css Grid

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

html css layout

Html 网格容器在“我的网格项”之后无缘无故有额外的列,html,css,layout,css-grid,Html,Css,Layout,Css Grid,我是网格新手，现在基本上正在反向设计涂鸦日历。我正在使用网格容器来包含我的所有项目。问题是，在网格项目的最后一列之后，似乎有一个额外的列占据了屏幕的其余部分这就是它看起来的样子：我希望能够删除右侧的额外空间，以便网格只占用我的网格项的空间这是我的HTML： <body> <div id="grid-container"> <div class="grid-item"></div>

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

这就是它看起来的样子：

我希望能够删除右侧的额外空间，以便网格只占用我的网格项的空间

这是我的HTML：

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

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

网格右侧有空间，因为默认情况下，网格是块元素，占其父元素（本例中的主体）的100%宽度。将容器的样式更改为

display:inlinegrid

使其宽度与内容大小相同。下面的示例代码段：

：根目录{
--colNum:4；
}
#网格容器{
显示：内联网格；
网格模板列：216px重复（var（--colNum），72px）；
背景色：白色；
边框：2倍纯色灰色；
填充：0px；
}
.表格项目{
背景色：白色；
边框：1px纯灰；
字体大小：20px；
文本对齐：居中；
填充：10px；
}


名字
检查
检查
检查
检查

#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;
}