是什么使该网格项目的宽度为0？

Question

这是我的网格，其中的标记中有10个单元格：

.container {
   width: 100%;
   height: 50%;
   display: grid;
   grid-template-rows: repeat(1, 1fr);
   grid-template-columns: repeat(10, 1fr);
}

当前页面为空。当我用Devtools检查它时，它显示div.cell为68.72x0，因此该单元格是隐藏的。 是什么使该单元格隐藏？在我的代码中，我什么都没弄清楚它的宽度。

---

这是我的原始代码：

* {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
}

.container {
   width: 100%;
   height: 50%;
   display: grid;
   grid-template-rows: repeat(1, 1fr);
   grid-template-columns: repeat(10, 1fr);
}

.cell:nth-of-type(1) {
   opacity: 0.2;
   background-color: palegreen;
   height: 27%;
   margin: 0 .2rem;
}