Как перекрывать элементы с помощью CSS Crid?

Question

Я разрабатываю приложение, используя угловые, и есть требование, чтобы я проектировал сетку, как показано на рисунке ниже. item 2 перекрывается с item1 , и все элементы, кроме item1, будут охватывать ширину элемента хост-элемента (контейнера)?

  <div class="item1">
               this is item 1           
            </div>
            <div class="item2">
               this is item 2           
            </div>
            <div class="item3">
               this is item 3           
            </div>
            <div class="item4">
               this is item 4           
            </div>

Можете ли вы помочь с моей сеткой CSS?

  :host{
          height: 100vh;
          display: grid;          
       }

Answer 1

Поместите .item1 и .item2 в одну строку и столбец (я использовал grid-area), а затем центрируйте .item2 с align-self и justify-self:

.host {
  height: 100vh;
  display: grid;
}

.item1, .item2 {
  grid-area: 1 / 1;
}

.item1 {
  background: red;
}

.item2 {
  background: purple;
  justify-self: center;
  align-self: center;
  padding: 1em;
}

.item3 {
  background: blue;
}

.item4 {
  background: green;
}

<div class="host">
  <div class="item1">
    this is item 1
  </div>
  <div class="item2">
    this is item 2
  </div>
  <div class="item3">
    this is item 3
  </div>
  <div class="item4">
    this is item 4
  </div>
</div>