Мне нужно, чтобы некоторые из моих элементов перекрывались, я также хочу указывать вещи по имени области, а не по строке/столбцу, потому что это делает чтение более приятным.
Я не могу понять, как работает указание нескольких областей сетки в соответствии с примерами 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спецификация:
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.