佔用可用水平空間的網格項目

Question

我有一個包含16個網格項目的網格。

我想要第一行取4格子項，第二行3，第三行2和第四行7.我希望它們中的每一個均勻間隔，以便它們佔據所有可用空間。

我可以在某種程度上通過指定grid-template-columns中的數字（即12）和在網格項上使用grid-column-end: span-*來實現此目的。然而，這對於我希望7個項目均勻分佈的行是不夠的。

對電網項目使用grid-column-end（除了最後一行有7個項目，其最後一項強迫自己進入grid-template-columns沒有指定行）預期的行爲：

的上面的代碼片段：

.grid-container { 
 
    display: grid; 
 
    grid-template-columns: repeat(12, 1fr [col]); 
 
    grid-template-rows: repeat(4, 50px [row]); 
 
    grid-gap: 10px; 
 
} 
 

 
.grid-item { 
 
    border-radius: 5px; 
 
    color: white; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.tier1 { 
 
    background-color: mediumseagreen; 
 
    grid-column-end: span 3; 
 
} 
 

 
.tier2 { 
 
    background-color: mediumorchid; 
 
    grid-column-end: span 4; 
 
} 
 

 
.tier3 { 
 
    background-color: mediumpurple; 
 
    grid-column-end: span 6; 
 
} 
 

 
.tier4 { 
 
    background-color: mediumvioletred; 
 
    grid-column-end: span 2; 
 
}

<div class="grid-container"> 
 
    <div class="grid-item tier1">1</div> 
 
    <div class="grid-item tier1">2</div> 
 
    <div class="grid-item tier1">3</div> 
 
    <div class="grid-item tier1">4</div> 
 
    <div class="grid-item tier2">5</div> 
 
    <div class="grid-item tier2">6</div> 
 
    <div class="grid-item tier2">7</div> 
 
    <div class="grid-item tier3">8</div> 
 
    <div class="grid-item tier3">9</div> 
 
    <div class="grid-item tier4">10</div> 
 
    <div class="grid-item tier4">11</div> 
 
    <div class="grid-item tier4">12</div> 
 
    <div class="grid-item tier4">13</div> 
 
    <div class="grid-item tier4">14</div> 
 
    <div class="grid-item tier4">15</div> 
 
    <div class="grid-item tier4">16</div> 
 
</div>

我的想法來解決，這是在grid-template-columns使用auto-fill公關操作，但不處理單獨的行。

自動填充行爲：

.grid-container { 
 
    display: grid; 
 
    grid-template-columns: repeat(auto-fill, 50px); 
 
    grid-template-rows: repeat(4, 50px); 
 
    grid-gap: 10px; 
 
} 
 

 
.grid-item { 
 
    border-radius: 5px; 
 
    color: white; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.tier1 { 
 
    background-color: mediumseagreen; 
 
} 
 
    /* grid-column-end: span 3; */ 
 

 
.tier2 { 
 
    background-color: mediumorchid; 
 
    /* grid-column-end: span 4; */ 
 
} 
 

 
.tier3 { 
 
    background-color: mediumpurple; 
 
    /* grid-column-end: span 6; */ 
 
} 
 

 
.tier4 { 
 
    background-color: mediumvioletred; 
 
    /* grid-column-end: span 2; */ 
 
} 
 

 

 

 
Code snippet of above:

<div class="grid-container"> 
 
    <div class="grid-item tier1">1</div> 
 
    <div class="grid-item tier1">2</div> 
 
    <div class="grid-item tier1">3</div> 
 
    <div class="grid-item tier1">4</div> 
 
    <div class="grid-item tier2">5</div> 
 
    <div class="grid-item tier2">6</div> 
 
    <div class="grid-item tier2">7</div> 
 
    <div class="grid-item tier3">8</div> 
 
    <div class="grid-item tier3">9</div> 
 
    <div class="grid-item tier4">10</div> 
 
    <div class="grid-item tier4">11</div> 
 
    <div class="grid-item tier4">12</div> 
 
    <div class="grid-item tier4">13</div> 
 
    <div class="grid-item tier4">14</div> 
 
    <div class="grid-item tier4">15</div> 
 
    <div class="grid-item tier4">16</div> 
 
</div>

就是這樣一個可能與行爲CSS網格？

Answer 1

我想你可以增加數山口和跨度值，以便它可以通過7

也分你也可以使用margin代替grid-gap: 10px;

.grid-container { 
 
    display: grid; 
 
    grid-template-columns: repeat(84, 1fr [col]); 
 
    grid-template-rows: repeat(4, 60px [row]); 
 
    
 
} 
 

 
.grid-item { 
 
    border-radius: 5px; 
 
    color: white; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    margin:5px 
 
} 
 

 
.tier1 { 
 
    background-color: mediumseagreen; 
 
    grid-column-end: span 21; 
 
} 
 

 
.tier2 { 
 
    background-color: mediumorchid; 
 
    grid-column-end: span 28; 
 
} 
 

 
.tier3 { 
 
    background-color: mediumpurple; 
 
    grid-column-end: span 42; 
 
} 
 

 
.tier4 { 
 
    background-color: mediumvioletred; 
 
    grid-column-end: span 12; 
 
}

<div class="grid-container"> 
 
    <div class="grid-item tier1">1</div> 
 
    <div class="grid-item tier1">2</div> 
 
    <div class="grid-item tier1">3</div> 
 
    <div class="grid-item tier1">4</div> 
 
    <div class="grid-item tier2">5</div> 
 
    <div class="grid-item tier2">6</div> 
 
    <div class="grid-item tier2">7</div> 
 
    <div class="grid-item tier3">8</div> 
 
    <div class="grid-item tier3">9</div> 
 
    <div class="grid-item tier4">10</div> 
 
    <div class="grid-item tier4">11</div> 
 
    <div class="grid-item tier4">12</div> 
 
    <div class="grid-item tier4">13</div> 
 
    <div class="grid-item tier4">14</div> 
 
    <div class="grid-item tier4">15</div> 
 
    <div class="grid-item tier4">16</div> 
 
</div>

Answer 2

我明白您正在關注CSS網格。但是，當我讀到：

我希望他們每個人是間隔均勻，使他們採取了所有的 可用空間。

這聽起來好像CSS Flexbox的將是這項工作的理想工具。

這裏是CSS Flexbox的的替代解決方案：

.grid-container { 
 
display: flex; 
 
flex-flow: row wrap; 
 
justify-content: space-between; 
 
width: 460px; 
 
} 
 

 
.grid-item { 
 
display: block; 
 
height: 60px; 
 
line-height: 60px; 
 
color: rgb(255, 255, 255); 
 
text-align: center; 
 
font-size: 22px; 
 
font-weight: bold; 
 
border-radius: 9px; 
 
margin: 4px; 
 
} 
 

 
.tier1 { 
 
flex: 1 1 calc((100% - (2 * 4px * 4))/4); /* 4 blocks */ 
 
background-color: mediumseagreen; 
 
} 
 

 
.tier2 { 
 
flex: 1 1 calc((100% - (2 * 4px * 3))/3); /* 3 blocks */ 
 
background-color: mediumorchid; 
 
} 
 

 
.tier3 { 
 
flex: 1 1 calc((100% - (2 * 4px * 2))/2); /* 2 blocks */ 
 
background-color: mediumpurple; 
 
} 
 

 
.tier4 { 
 
flex: 1 1 calc((100% - (2 * 4px * 7))/7); /* 7 blocks */ 
 
background-color: mediumvioletred; 
 
}

<div class="grid-container"> 
 
    <div class="grid-item tier1">1</div> 
 
    <div class="grid-item tier1">2</div> 
 
    <div class="grid-item tier1">3</div> 
 
    <div class="grid-item tier1">4</div> 
 
    <div class="grid-item tier2">5</div> 
 
    <div class="grid-item tier2">6</div> 
 
    <div class="grid-item tier2">7</div> 
 
    <div class="grid-item tier3">8</div> 
 
    <div class="grid-item tier3">9</div> 
 
    <div class="grid-item tier4">10</div> 
 
    <div class="grid-item tier4">11</div> 
 
    <div class="grid-item tier4">12</div> 
 
    <div class="grid-item tier4">13</div> 
 
    <div class="grid-item tier4">14</div> 
 
    <div class="grid-item tier4">15</div> 
 
    <div class="grid-item tier4">16</div> 
 
</div>