CSS Grid

by ordette

HTML

<div class="container">
  <div class="item item-a">asd;ljdslkjslkjd</div>
  <div class="item item-b"></div>
  <div class="item item-c"></div>
  <div class="item item-d"></div>
</div>

CSS

.container{
  border: 1px solid black;
  display: grid;
  grid-template-columns:40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto 100px 25px;
}

.item-a {
  background-color: blue;
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;  
  font: bold 25px Helvetica, sans-serif;
}
.item-b {
  background-color: green;
  grid-column-start: 4 | 1;
  grid-row-start: 1;
  grid-row-end: 3;  
}

.item-c {
  background-color: yellow;
  grid-column-start: 4;
  grid-column-end: 6;
  grid-row-start: 2;
  grid-row-end: 3;
}

.item-d {
  background-color: pink;
  grid-column-start: 2;
  grid-column-end: 5;
  grid-row-start: 4;
  grid-row-end: 5;
}