在css网格中有相同大小的元素？

Question

我通过sass制作了一个带css网格的网格。我希望在整体方形中有40个相同大小的正方形。然而，右侧的方块保持自动调整比其他方格小得多。

网格在这里：https://codepen.io/nessaek/pen/rJmWrv

关键尺寸详情如下：

ul {
   display: grid;
    grid-template-columns: repeat(10, 1vw);
    grid-template-rows: repeat( 10, 1vw);
    justify-content: center;
    align-content: center;
    grid-gap: 1rem;
    min-height: 90vh;
    list-style: none;
    margin: 0 0 2vw;
    padding: 0;
    font-size: calc(2vw + 10px);
  }

奇怪的是，当我只有16个方格时，方块大小相同。但是当有40个时，方块变得不相等。感谢任何建议使所有方块大小相等！非常感谢，

Answer 1

由于您有11列和11行，您可以将ul设置为

grid-template-columns: repeat(11, 1vw);
grid-template-rows: repeat(11, 1vw);

请告诉我这是否有帮助。