我需要一些元素重叠，我还想通过区域名称而不是行/列来指定内容，因为这样可以更好地阅读。
我一生都无法理解如何按照 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 中。
您需要指定 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（只有一个单元格是e).
grid-area: a / i会将您带到该区域c例如。
From t他规格 https://www.w3.org/TR/css-grid-1/#implicitly-assigned-line-name:
grid-template-areas 属性从模板中的命名网格区域生成隐式分配的线名称。对于每个命名网格区域foo，创建四个隐式分配的行名称：两个命名foo-start，命名指定网格区域的行起始线和列起始线，以及两个命名的foo-end，命名指定网格区域的行尾线和列尾线。
Then
<custom-ident>
第一次尝试将网格区域的边缘与命名网格区域匹配：如果存在具有该名称的命名线<custom-ident>-start (for grid-*-start) / <custom-ident>-end (for grid-*-end)，将第一条这样的线贡献给网格项的放置。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
