grid

by Alexander Zonov

HTML

<div class="grid">
  <div class="item item--height"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS

.grid {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.item {
  min-height: 100px;
  background-color: green;
  height: 100%;
}

.item--height {
  height: 150px;
  background-color: blue;
}

.item:nth-of-type(1) {
  opacity: 1;
}

.item:nth-of-type(2) {
  opacity: 0.9;
}

.item:nth-of-type(3) {
  opacity: 0.8;
}

.item:nth-of-type(4) {
  opacity: 0.7;
}

.item:nth-of-type(5) {
  opacity: 0.6;
}

.item:nth-of-type(6) {
  opacity: 0.5;
}