CODEWITHSUNDEEP
csscss-grid
user81993
user81993

Reputation: 6613

CSS grid and specifying multiple areas

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.

Upvotes: 14

Views: 13519

Answers (1)

Temani Afif
Temani Afif

Reputation: 272842

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.

Multiple grid-area

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.

Upvotes: 27

Related Questions