html - 为什么 grid-template-areas 属性无效？

Question

我有以下代码：

CSS

.items {
    display: grid;
    grid-template-columns: 1fr 40px 1fr 40px 1fr;
    grid-template-columns: auto 40px auto;
    grid-template-areas: 
    "i1 . i2 . i3"
    ". . ."
    "i4 . i5 . i6";
}
.i1 {
    grid-area: i1;
}
.i2 {
    grid-area: i2;
}
.i3 {
    grid-area: i3;
}
.i4 {
    grid-area: i4;
}
.i5 {
    grid-area: i5;
}
.i6 {
    grid-area: i6;
}

HTML

<div class="i1"></div>
<div class="i2"></div>
<div class="i3"></div>
<div class="i4"></div>
<div class="i5"></div>
<div class="i6"></div>

一切都变得一团糟，在开发工具中，我可以看到我在定义 grid-template-areas 属性的行上收到一条警告，上面写着“无效的属性值”。

如果我删除“......” 从财产价值开始，一切都开始起作用。

但我需要行之间的缩进。我怎样才能让它工作？

标签： htmlcssgridcss-grid

Answer 1

将您的网格简化为：

i1 i2 i3
i4 i5 i6

完成此操作后，应用 . 的网格行/列间隙40px。

.items {
  display: grid;
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-columns: repeat(1fr);
  grid-template-areas:
    "i1 i2 i3"
    "i4 i5 i6";
}

.i1 { grid-area: i1; }
.i2 { grid-area: i2; }
.i3 { grid-area: i3; }
.i4 { grid-area: i4; }
.i5 { grid-area: i5; }
.i6 { grid-area: i6; }

<div class="items">
  <div class="i1">1</div>
  <div class="i2">2</div>
  <div class="i3">3</div>
  <div class="i4">4</div>
  <div class="i5">5</div>
  <div class="i6">6</div>
</div>

这是一个带边距的版本（如果grid-gap不可用）：

.items {
  display: grid;
  grid-template-columns: repeat(1fr);
  grid-template-areas:
    "i1 i2 i3"
    "i4 i5 i6";
}

.i1, .i2, .i3 { margin-bottom: 20px; }
.i4, .i5, .i6 { margin-top: 20px; }

.i1, .i4 { margin-right: 20px; }
.i2, .i5 { margin-left: 20px; margin-right: 20px; }
.i3, .i6 { margin-left: 20px; }

.i1 { grid-area: i1; }
.i2 { grid-area: i2; }
.i3 { grid-area: i3; }
.i4 { grid-area: i4; }
.i5 { grid-area: i5; }
.i6 { grid-area: i6; }

<div class="items">
  <div class="i1">1</div>
  <div class="i2">2</div>
  <div class="i3">3</div>
  <div class="i4">4</div>
  <div class="i5">5</div>
  <div class="i6">6</div>
</div>