Question

我需要一些元素重叠，我还想通过区域名称而不是行/列来指定事物，因为这样可以使阅读更好。

我一生无法理解按照MDN示例指定多个网格区域的工作方式。或者，如果可能的话，本文根据语法示例提出了可能的建议，但是它实际上是如何工作的呢？没有线索。

示例问题：

document.querySelector("input").focus();

#my_grid {
  display:grid;
  grid-gap:5px;
  grid-template-rows: 50px 50px 50px;
  grid-template-columns: 50px 50px 50px;
  grid-template-areas:  "a b c"
                        "d e f"
                        "g h i";

}

#my_grid > div {
  text-align:center;
  line-height:50px;
  border:1px solid rgba(0,0,0,0.3);
  background-color:rgba(0,0,0,0.1);
}

<div id="my_grid">
  <div style="grid-area:a">a</div>
  <div style="grid-area:b">b</div>
  <div style="grid-area:c">c</div>
  <div style="grid-area:d">d</div>
  <div style="grid-area:e">e</div>
  <div style="grid-area:f">f</div>
  <div style="grid-area:g">g</div>
  <div style="grid-area:h">h</div>
  <div style="grid-area:i">i</div>
  <input type="text" onKeyUp="this.style.gridArea = this.value" style="grid-area:d / e" value="d / e">
</div>

Type your own area

我希望我的输入内容涵盖d和e区域，指定d / e只需将其放在e中即可。

Answer 1

您需要指定4个值，例如grid-area:d / d / d / e，这意味着：

grid-row-start: d;
grid-column-start: d; /* Start at d */
grid-row-end: d;
grid-column-end: e; /* End at e */

document.querySelector("input").focus();

#my_grid {
  display:grid;
  grid-gap:5px;
  grid-template-rows: 50px 50px 50px;
  grid-template-columns: 50px 50px 50px;
  grid-template-areas:  "a b c"
                        "d e f"
                        "g h i";

}

#my_grid > div {
  text-align:center;
  line-height:50px;
  border:1px solid rgba(0,0,0,0.3);
  background-color:rgba(0,0,0,0.1);
}

<div id="my_grid">
  <div style="grid-area:a">a</div>
  <div style="grid-area:b">b</div>
  <div style="grid-area:c">c</div>
  <div style="grid-area:d">d</div>
  <div style="grid-area:e">e</div>
  <div style="grid-area:f">f</div>
  <div style="grid-area:g">g</div>
  <div style="grid-area:h">h</div>
  <div style="grid-area:i">i</div>
  <input type="text" onKeyUp="this.style.gridArea = this.value" style="grid-area:d / d / d / e" value="d / d / d / e">
</div>

Type your own area

只有两个值grid-area:d / e，您拥有

grid-row-start: d;
grid-column-start: e;
grid-row-end: d;
grid-column-end: e;

因此，这基本上会将元素定位在d行所在的行和e行所在行的交集（仅一个单元格）中。

例如，

grid-area:a / i会将您放在c中。

CSS网格并指定多个区域

1 个答案: