如何自动使用CSS电网

问题描述：

我目前正在创建使用内置的CSS网这样如何自动使用CSS电网

.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; 
}

我想要做的是汽车我8山坳网格创建网格，而无需创建一个名称的列指定所有列的宽度，因为它们都具有相同的宽度。我在想，我可以用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电网

相关推荐