CSS сетка и указание нескольких областей

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, например.