css 网格中有大小相等的元素吗？

Question

我用 css 网格通过 sass 制作了一个网格。我希望在一个整体正方形中有 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);

请告诉我这是否有帮助。

css 网格中有大小相等的元素吗？

Have equal-sized elements in css grid?

css

sass

css-grid