如何让网格列和行元素扩展/调整大小以适合其父容器？

Question

https://jsfiddle.net/Jbautista1056/pvdq6gye/7/

#Sketch {
    height: 800px;
    max-width: 1000px;
    margin: 0 auto;
    margin-top: 25px;
    background-color: white;
    border-radius: 70px;
    border: 70px solid rgba(55, 220, 205, 0.44);
    display: grid;
    grid-template-rows:  repeat(autofit, 1fr) ;           /*auto-fit expands to fit inside the available columns/number specified*/
    grid-template-columns: repeat(4, 1fr);     /*2nd number is how wide u want the column to be*/ 
    grid-row-gap: .3em;
    grid-column-gap: .3em;
}

#tile {
    border: 1px rgba(0, 0, 0, 0.041) solid;
    height: auto;
    width: auto;
    background-color: red;
}

.babytiles {
    height: auto;
    width: auto;
    border: 10px rgba(0, 0, 0, 0.041) solid;
    background-color: red
}

我正在尝试让行和列自动适应父 div。我只能让行自行调整以适应指定列的数量，反之亦然。但我不能让行和列都对齐在一起。

这是我得到的视觉示例

这就是我想要实现的目标。我只能通过直接指定我想要 4 列和 4 行来实现这一点，但它的动态性不足以考虑用户输入。

最终我想使用 javascript 来获取用户输入来更改磁贴将占用的行数和列数，同时调整磁贴的大小以适应这些规范。

Answer 1

更改网格模板列

grid-template-columns: repeat(autofit, 1fr);