CSS Grid Layout 1

by Artem

HTML

<div class="grid">
  <div class="grid__col grid__col_1"></div>
  <div class="grid__col grid__col_2"></div>
  <div class="grid__col grid__col_3"></div>
  <div class="grid__col grid__col_4"></div>
  <div class="grid__col grid__col_5"></div>
  <div class="grid__col grid__col_6"></div>
</div>

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(12, auto);
  grid-template-rows: auto auto auto;
  justify-content: space-evenly;
  align-items: center;
}

.grid__col {
  background-color: #b1b1b1;
  padding: 20px;
  border: 2px solid white;
  grid-column: span 4;
}

.grid__col_1 {
  grid-column: span 12;
}

.grid__col_2 {
  grid-column: span 6;
  grid-row: span 2;
}

.grid__col_3 {
  grid-column: span 6;
}

.grid__col_4 {
  grid-column: span 6;
}

.grid__col_5 {
  grid-column: span 2;
}

.grid__col_6 {
  grid-column: span 10;
}