Responsive grid with CSS Grids

Responsive grid with CSS Grids

HTML

<div class="grid-test">
  <div class="item grid-1-1"></div>
  <div class="item grid-1-2"></div>
  <div class="item grid-1-3"></div>
  <div class="item grid-1-4"></div>
  <div class="item grid-1-5"></div>
  <div class="item grid-2-1"></div>
  <div class="item grid-2-2"></div>
  <div class="item grid-2-3"></div>
  <div class="item grid-2-4"></div>
  <div class="item grid-2-5"></div>
  <div class="item grid-3-1"></div>
  <div class="item grid-3-2"></div>
  <div class="item grid-3-3"></div>
  <div class="item grid-3-4"></div>
  <div class="item grid-3-5"></div>
  <div class="item-a"></div>
  <div class="item-b"></div>
</div>

SCSS

.grid-test {
  display:grid;
  grid-template-columns:40px 50px auto 50px 40px;
  grid-template-rows:25% 100px auto;
	.item {
		border:1px dotted;
		padding:1rem;
		&[class*=grid-1] {
			grid-row:1;
		}
		&[class*=grid-2] {
			grid-row:2;
		}
		&[class*=grid-3] {
			grid-row:3;
		}
	}
}

.grid-1-1,
.grid-2-1,
.grid-3-1 {
  grid-column:1;
}

.grid-1-2,
.grid-2-2,
.grid-3-2 {
  grid-column:2;
}

.grid-1-3,
.grid-2-3,
.grid-3-3 {
  grid-column:3;
}

.grid-1-4,
.grid-2-4,
.grid-3-4 {
  grid-column:4;
}

.grid-1-5,
.grid-2-5,
.grid-3-5 {
  grid-column:5;
}

.item-a {
  background-color:rgba(255,255,0,0.5);
  grid-column:2 / span 3;
  grid-row:1 / span 2;
}

.item-b {
  background-color:rgba(0,0,255,0.5);
  grid-column:1 / span 3;
  grid-row:2 / span 2;
}