占用可用水平空间的网格项目

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>