CSS grid-row grid-column

by Rodwyn Moreno

HTML

<section class="container">
  <div class="item">
    A
  </div>
  <div class="item header">
    B
  </div>
  <div class="item">
    c
  </div>
  <div class="item">
    d
  </div>
  <div class="item">
    e
  </div>
</section>

SCSS

$item-size: 210px;
$col-gutter: 10px;
$vp-gutter: $col-gutter;
$max-cols: 5;

.container {
  border: #e30000 solid thin; 
  display: grid;
  grid-template-columns: repeat(auto-fill, $item-size);
	grid-auto-rows: $item-size;
	grid-gap: $col-gutter;
	list-style: none;
}

.item {
  background: #4286f4;
}

.header {
  grid-row: span 2;
	grid-column: span 2;
}