如何使用 css 网格自动创建名称列
How to auto create columns with name using css grid
我目前正在使用内置的 css-grid 创建我的 8 列网格,就像这样
.post{
display: grid;
grid-template-columns: [col1]1fr [col2]1fr [col3] 1fr [col4] 1fr [col5] 1fr [col6]1fr [col7] 1fr [col8]1fr [col-end];
grid-template-rows: [row1-start]1fr [row2-start]1fr [row3-start]1fr[row3-end];
grid-row-gap: 16px;
}
我想做的是自动创建网格,而不必为所有列指定宽度,因为它们都具有相同的宽度。
我在想我可以像这样使用 grid-template-columns:
grid-template-columns: repeat(8, [col1][col2][col3][col4][col5][col6][col7][col8] 1fr);
但它不起作用。我将如何着手简化网格的定义?
我会使用 grid-template-areas
分隔列名,然后设置列宽。
.post {
display: grid;
grid-template-areas:
"col1 col2 col3 col4 col5 col6 col7 col8";
grid-template-columns: repeat(8, 1fr);
}
.post > div {
background: #ccc;
}
<div class="post">
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
</div>
我目前正在使用内置的 css-grid 创建我的 8 列网格,就像这样
.post{
display: grid;
grid-template-columns: [col1]1fr [col2]1fr [col3] 1fr [col4] 1fr [col5] 1fr [col6]1fr [col7] 1fr [col8]1fr [col-end];
grid-template-rows: [row1-start]1fr [row2-start]1fr [row3-start]1fr[row3-end];
grid-row-gap: 16px;
}
我想做的是自动创建网格,而不必为所有列指定宽度,因为它们都具有相同的宽度。 我在想我可以像这样使用 grid-template-columns:
grid-template-columns: repeat(8, [col1][col2][col3][col4][col5][col6][col7][col8] 1fr);
但它不起作用。我将如何着手简化网格的定义?
我会使用 grid-template-areas
分隔列名,然后设置列宽。
.post {
display: grid;
grid-template-areas:
"col1 col2 col3 col4 col5 col6 col7 col8";
grid-template-columns: repeat(8, 1fr);
}
.post > div {
background: #ccc;
}
<div class="post">
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
</div>