CSS如何让父级的子级占据相同的空间？

Question

我目前正在使用网格来显示预定义数量的子元素。问题是我不知道我需要多少个盒子。有没有办法让它更加动态？例如，当只有 4 个子元素时，它会变成 2x2，占据所有可用空间？如果有 9 个子元素，它会变成大小相等的 3x3？

我当前的网格：

我实现上图的代码：

import React from 'react';
import Container from "./Container";

export default function AsanaIssues() {
    return(
        <div className="asana-issues--parent">
            <Container className="asana-issues--div1" title="Online" value={25}/>
            <Container className="asana-issues--div2" title="Online" value={54}/>
            <Container className="asana-issues--div3" title="Online" value={97}/>
            <Container className="asana-issues--div4" title="Online" value={31}/>
            <Container className="asana-issues--div5" title="Online" value={55}/>
            <Container className="asana-issues--div6" title="Online" value={35}/>
            <Container className="asana-issues--div7" title="Online" value={78}/>
            <Container className="asana-issues--div8" title="Online" value={45}/>
            <Container className="asana-issues--div9" title="Online" value={35}/>
            <Container className="asana-issues--div10" title="Online" value={35}/>
            <Container className="asana-issues--div11" title="Online" value={99}/>
            <Container className="asana-issues--div12" title="Online" value={21}/>
            <Container className="asana-issues--div13" title="Online" value={3}/>
            <Container className="asana-issues--div14" title="Online" value={21}/>
            <Container className="asana-issues--div15" title="Online" value={88}/>
            <Container className="asana-issues--div16" title="Online" value={46}/>
        </div>
    )
}

我当前的CSS：

.asana-issues--parent {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    border-radius: 10px;
    margin: 10px;
}

.asana-issues--div1 { grid-area: 1 / 1 / 2 / 2; }
.asana-issues--div2 { grid-area: 1 / 2 / 2 / 3; }
.asana-issues--div3 { grid-area: 1 / 3 / 2 / 4; }
.asana-issues--div4 { grid-area: 1 / 4 / 2 / 5; }
.asana-issues--div5 { grid-area: 2 / 1 / 3 / 2; }
.asana-issues--div6 { grid-area: 2 / 2 / 3 / 3; }
.asana-issues--div7 { grid-area: 2 / 3 / 3 / 4; }
.asana-issues--div8 { grid-area: 2 / 4 / 3 / 5; }
.asana-issues--div9 { grid-area: 3 / 1 / 4 / 2; }
.asana-issues--div10 { grid-area: 3 / 2 / 4 / 3;}
.asana-issues--div11 { grid-area: 3 / 3 / 4 / 4; }
.asana-issues--div12 { grid-area: 3 / 4 / 4 / 5; }
.asana-issues--div13 { grid-area: 4 / 1 / 5 / 2; }
.asana-issues--div14 { grid-area: 4 / 2 / 5 / 3; }
.asana-issues--div15 { grid-area: 4 / 3 / 5 / 4; }
.asana-issues--div16 { grid-area: 4 / 4 / 5 / 5; }

Answer 1

解决我的问题的方法是自动填充 grid-template-rows 属性的重复。

.asana-issues--parent {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(auto-fill, 1fr);
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    border-radius: 10px;
    margin: 10px;
}