我有一个包含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网格?
你在使用浏览器(S)? –
@Michael_B Chrome版本57.0.2976。0 canary(64-bit) – alanbuchanan
你可以在这里做片段而不是2个链接?它并不方便,帮助你... –