CSS 如何让 parent 的孩子占据等量的 space?
CSS how to make childeren of a parent take up equal amounts of space?
我目前正在使用网格来显示预定义数量的子元素。问题是我不知道我需要多少箱子。有没有办法让它更有活力?例如,当只有 4 个子元素时,它会变成 2x2,占用所有可用的 space?如果有 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; }
解决我的问题的方法是auto-fill重复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;
}
我目前正在使用网格来显示预定义数量的子元素。问题是我不知道我需要多少箱子。有没有办法让它更有活力?例如,当只有 4 个子元素时,它会变成 2x2,占用所有可用的 space?如果有 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; }
解决我的问题的方法是auto-fill重复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;
}