rahmanyerli

body {
  margin: 0;
  padding: 4rem;
}

.tile {
  background-color: #0066CC;
  font-family: sans-serif;
  font-size: 1.25rem;
  font-weight: 300;

rahmanyerli

<div class="container-64">
  <div class="cols-3 gap-3">
    <div class="col-1 cols-2 gap-05">
      <a class="col-1 tile">Item 1</a>
      <a class="col-1 tile">Item 2</a>
      <a class="col-1 tile">Item 3</a>
      <a class="col-1 tile">Item 4</a>
      <a class="col-2 tile">Item 5</a>
    </div>
    <div class="col-1 cols-2 rows-3 gap-05">

rahmanyerli

.tile {
  background-color: #0066CC;
  font-family: sans-serif;
  font-size: 1.25rem;
  font-weight: 300;
  text-align: center;
  vertical-align: center;
  color: #FFFFFF;
  padding: 3rem 1rem;
}

rahmanyerli

.gap-025 {
    grid-gap: 0.25rem;
}

.gap-05 {
    grid-gap: 0.75rem;
}

.gap-075 {
    grid-gap: 0.75rem;

rahmanyerli

.row-1 {
    grid-row: span 1;
}

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

.row-3 {
    grid-row: span 3;

rahmanyerli

.rows-1 {
    display: grid;
    grid-template-rows: repeat(1, 1fr);
}

.rows-2 {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
}

rahmanyerli

.col-1 {
    grid-column: span 1;
}

.col-2 {
    grid-column: span 2;
}

.col-3 {
    grid-column: span 3;

rahmanyerli

.cols-1 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}

.cols-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

rahmanyerli

.container-64 {
    max-width: 64rem;
    margin: auto;
}