CSS grid and specifying multiple areas

Question

I need some of my elements to overlap, I also want to specify things by area name rather than row/column because it makes for a nicer read.

I cannot for the life of me understand how specifying multiple grid areas works as per MDN examples. Or if its even possible, the article suggests its possible as per syntax examples but how does it actually work?? Not a clue.

Example problem:

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

I want my input to cover both areas d and e, specifying d / e just puts it in e.

Answer 1

You need to specify 4 values like grid-area: d / d / d / e which means:

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

With only two values grid-area: d / e you have:

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

So this will basically position the element in the intersection of the row where there is d and the column where there is e (only one cell which is the e).

grid-area: a / i will put you on the area c for example.

From the 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 named foo-start, naming the row-start and column-start lines of the named grid area, and two named foo-end, naming the row-end and column-end lines of the named grid area.

Then

<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 (for grid-*-start) / <custom-ident>-end (for grid-*-end), contributes the first such line to the grid item’s placement.