css grid overlap extra items without shifting elements

Question

I have a grid element with a set number of rows and columns that has one more element than rows * columns. I'm trying to overlap this extra item on top of one of the cells (changes overtime) but the whole layout shifts whenever I try to set a specific row/column on the extra cell.

.grid {
  display:grid;
  width: 60px;
  height: 60px;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr)
}

.cell {
  width: 30px;
  height: 30px;
  background: grey;
  box-sizing: border-box;
}

results in something like

but when I set a specific row and column via:

.extra {
  grid-row: 1/2;
  grid-column: 1/2;
}

I get the following

but what I actually want

user_2802040 · Answer

You need to specify where the first div will be as well as the extra div

.grid {
  display: grid;
  width: 60px;
  height: 60px;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr)
}

.cell {
  width: 30px;
  height: 30px;
  line-height: 30px;
  background: grey;
  box-sizing: border-box;
  text-align: center;
}

.grid .cell:first-child,
.cell.extra {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

user_1172189 · Answer

You can use 1/-1 for the positioning on the grid-column and grid-row

.grid {
  display: grid;
  width: 60px;
  height: 60px;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 30px;
}

.cell {
  width: 30px;
  height: 30px;
  background: grey;
  box-sizing: border-box;
}

.cell.extra {
  grid-column: 1/-1;
  grid-row: 1/-1;
}

user_8620333 · Answer

Grid items will never overlap unless you explicitely specify this. Since you have 4 areas you will need 4 rules to make sure your items (whataver their number) will never create more areas:

.grid {
  display:grid;
  margin:5px;
  width: 60px;
  height: 60px;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr)
}

.cell {
  width: 30px;
  height: 30px;
  background: grey;
  box-sizing: border-box;
}

.cell:nth-child(4n + 1) {grid-area:1/1}
.cell:nth-child(4n + 2) {grid-area:1/2}
.cell:nth-child(4n + 3) {grid-area:2/1}
.cell:nth-child(4n + 4) {grid-area:2/2}

css grid overlap extra items without shifting elements

3 Answers