我需要我的一些元素重叠,我还想按区域名称而不是行/列来指定内容,因为这样可以更好地阅读。
我一辈子都无法理解如何按照 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
例如。
来自 t he specification :
The grid-template-areas property generates implicitly-assigned line names from the named grid areas in the template. For each named grid area
foo
, four implicitly-assigned line names are created: two namedfoo-start
, naming the row-start and column-start lines of the named grid area, and two namedfoo-end
, naming the row-end and column-end lines of the named grid area.
然后
<custom-ident>
First attempt to match the grid area’s edge to a named grid area: if there is a named line with the name
<custom-ident>-start
(forgrid-*-start
) /<custom-ident>-end
(forgrid-*-end
), contributes the first such line to the grid item’s placement.
关于CSS网格和指定多个区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56238923/