Как наложить один грид-элемент на другой пользуясь именованными областями?

Рейтинг: -1Ответов: 1Опубликовано: 13.03.2023

Способом ниже - понятно, от одного числа до другого и z-index.

.setka {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 100px);
  color: white;
}
.blue {
  grid-row: 2 / 3;
  grid-column: 1 / 3;
  background: blue;
  z-index: 1;
}
.green {
  grid-row: 1 / 4;
  grid-column: 2 / 4;
  background: green;
}
<div class="setka">
<div class="blue">Lorem Ipsum</div>
<div class="green">Lorem Ipsum</div>
</div>

А как получить аналогичный эффект с помощью grid-template-areas? Какая форма записи? (если существует)

css css-grid grid
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

аналогичный эффект можно получить с grid-template-areas, однако расположение второго блока все равно придется настраивать вручную, для перекрытия с помощью свойства grid-area.

.setka {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  grid-template-areas: 
  ".    green green"
  "blue blue  .    "
  ".    .     .    ";
  color: white;
}
.blue {
  grid-area: blue;
  background: blue;
  z-index: 1;
  
}
.green {
  grid-area: green-start / green / 3 span;
  background: green;
}
<div class="setka">
<div class="blue">Lorem Ipsum</div>
<div class="green">Lorem Ipsum</div>
</div>

.setka {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  grid-template-areas: 
    ".    green green" 
    "blue green green" 
    ".    green green";
  color: white;
}

.blue {
  grid-area: blue-start / blue-start / blue-end / 2 span;
  background: blue;
  z-index: 1;
}

.green {
  grid-area: green;
  background: green;
}
<div class="setka">
  <div class="blue">Lorem Ipsum</div>
  <div class="green">Lorem Ipsum</div>
</div>