CSS 网格 - 可重复的网格模板区域
CSS Grid - repeatable grid-template-areas
假设我们有一个包含 7 个项目的新闻条目列表。
我创建了一个带有 CSS 网格的模式,该模式应在 6 项之后自行重复。
@supports (display: grid)
{
.list
{
display: grid;
grid-gap: 25px;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
grid-template-areas:
"bigLeft bigLeft right1 right2"
"bigLeft bigLeft bigRight bigRight"
"left1 left2 bigRight bigRight";
}
.item:nth-of-type(6n+1)
{
grid-area: bigLeft;
}
.item:nth-of-type(6n+2)
{
grid-area: right1;
}
.item:nth-of-type(6n+3)
{
grid-area: right2;
}
.item:nth-of-type(6n+4)
{
grid-area: left1;
}
.item:nth-of-type(6n+5)
{
grid-area: left2;
}
.item:nth-of-type(6n+6)
{
grid-area: bigRight;
}
}
想要的grid-template-areas
模式:
现在我希望这种模式重复并重复添加到列表中的更多项目。
但是 HERE 您可以看到,一旦添加了第 7 个项目,该模式就不会继续,而是会被替换。
我也尝试过未命名区域
.item:nth-of-type(6n+1) {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
.item:nth-of-type(6n+2) {
grid-column: 3 / 4;
grid-row: 1 / 2;
}
.item:nth-of-type(6n+3) {
grid-column: 4 / 5;
grid-row: 1 / 2;
}
.item:nth-of-type(6n+4) {
grid-column: 1 / 2;
grid-row: 3 / 4;
}
.item:nth-of-type(6n+5) {
grid-column: 2 / 3;
grid-row: 3 / 4;
}
.item:nth-of-type(6n+6) {
grid-column: 3 / 5;
grid-row: 2 / 4;
}
但结果相同...
我在规范中找不到任何解决方案来完成 "repeatable grid-template-areas"
你们中有人有想法吗?
grid-templates-areas
覆盖 grid-template-rows
和 -columns
。您必须选择一种或另一种方式来描述您的网格布局。
对于重复模式,您可以使用 :nth-child(n)
并重置跨越值:( https://codepen.io/gc-nomade/pen/qVdpwL ) 或下面的片段
.grid {
width: 1000px;
margin: 0 auto;
display: grid;
grid-gap: 25px;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
padding: 10px;
counter-reset:div
}
.item:nth-child(6n + 4),
.item:nth-child(6n + 1) {
grid-column: auto /span 2;
grid-row: auto /span 2;
}
.item {
border: solid;
display:flex;
}
.item:before {
counter-increment:div;
content:counter(div);
margin:auto;
font-size:40px;
}
<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
如果您的元素是随机出现的,但需要放置在网格中的特定位置(第 6 个应该在第 4 个位置并且跨越),那么您将需要为每个元素设置一个顺序值 :( ...如果内容和顺序可能有所不同,您需要在 javascript 上转播
假设我们有一个包含 7 个项目的新闻条目列表。
我创建了一个带有 CSS 网格的模式,该模式应在 6 项之后自行重复。
@supports (display: grid)
{
.list
{
display: grid;
grid-gap: 25px;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
grid-template-areas:
"bigLeft bigLeft right1 right2"
"bigLeft bigLeft bigRight bigRight"
"left1 left2 bigRight bigRight";
}
.item:nth-of-type(6n+1)
{
grid-area: bigLeft;
}
.item:nth-of-type(6n+2)
{
grid-area: right1;
}
.item:nth-of-type(6n+3)
{
grid-area: right2;
}
.item:nth-of-type(6n+4)
{
grid-area: left1;
}
.item:nth-of-type(6n+5)
{
grid-area: left2;
}
.item:nth-of-type(6n+6)
{
grid-area: bigRight;
}
}
想要的grid-template-areas
模式:
现在我希望这种模式重复并重复添加到列表中的更多项目。 但是 HERE 您可以看到,一旦添加了第 7 个项目,该模式就不会继续,而是会被替换。
我也尝试过未命名区域
.item:nth-of-type(6n+1) {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
.item:nth-of-type(6n+2) {
grid-column: 3 / 4;
grid-row: 1 / 2;
}
.item:nth-of-type(6n+3) {
grid-column: 4 / 5;
grid-row: 1 / 2;
}
.item:nth-of-type(6n+4) {
grid-column: 1 / 2;
grid-row: 3 / 4;
}
.item:nth-of-type(6n+5) {
grid-column: 2 / 3;
grid-row: 3 / 4;
}
.item:nth-of-type(6n+6) {
grid-column: 3 / 5;
grid-row: 2 / 4;
}
但结果相同...
我在规范中找不到任何解决方案来完成 "repeatable grid-template-areas"
你们中有人有想法吗?
grid-templates-areas
覆盖 grid-template-rows
和 -columns
。您必须选择一种或另一种方式来描述您的网格布局。
对于重复模式,您可以使用 :nth-child(n)
并重置跨越值:( https://codepen.io/gc-nomade/pen/qVdpwL ) 或下面的片段
.grid {
width: 1000px;
margin: 0 auto;
display: grid;
grid-gap: 25px;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
padding: 10px;
counter-reset:div
}
.item:nth-child(6n + 4),
.item:nth-child(6n + 1) {
grid-column: auto /span 2;
grid-row: auto /span 2;
}
.item {
border: solid;
display:flex;
}
.item:before {
counter-increment:div;
content:counter(div);
margin:auto;
font-size:40px;
}
<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
如果您的元素是随机出现的,但需要放置在网格中的特定位置(第 6 个应该在第 4 个位置并且跨越),那么您将需要为每个元素设置一个顺序值 :( ...如果内容和顺序可能有所不同,您需要在 javascript 上转播