Question

是否可以在CSS网格布局中修改模板以用于特定的行或列，而不必重写网格？像这样：

.grid {
    display: grid;
    grid-template:
      "a a"
      "b b";
}
.grid .grid.row-2 {
    grid-template-row-2: "b a";
}

Answer 1

您可以使用CSS变量对此进行近似：

.grid {
    display: grid;
    grid-template-areas:
      var(--row1,"a a")
      var(--row2,"b b");
      
    grid-auto-columns:40px;
    grid-auto-rows:40px;
    margin:10px;
}
.grid.row-2 {
    --row2:"b c";
}

.a {
  grid-area:a;
  background:red;
}

.b {
  grid-area:b;
  background:blue;
}

<div class="grid">
  <div class="a"></div>
  <div class="b"></div>
</div>

<div class="grid row-2">
  <div class="a"></div>
  <div class="b"></div>
</div>

Answer 2

绝对-您可以使用grid-row-start和grid-row-end： https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start

甚至grid-row: 1 / span 2;： https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row

因此，您将执行以下操作：

.grid > div {
  border: 1px solid red;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.grid .row-2 {
  grid-row: 1 / span 2;
}

<div class="grid">
  <div class="row-2">Hello</div>
  <div>Hello</div>
  <div>Hello</div>
</div>

在“网格布局”中，是否可以根据类更改行？

2 个答案: