Create responsive tile layout with CSS Grid

Question

I am getting into the CSS Grid and I was wondering how to create a responsive tile-like layout with it, something like this:

https://aggie.io/0g_rzi1fg7

Is grid a good approach for something like this..? Markup:

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-rows: 50%;
  grid-template-columns: 50% 50%;

  a {
    border: 1px solid blue;
  }
}

<div class="grid">
  <a href="" class="grid-lg">
    Large item here
  </a>

  <div class="grid-sm-container">
    <a class="grid-sm">
      Smaller item here
    </a>
    <a class="grid-sm">
      Smaller item here
    </a>
    <a class="grid-sm">
      Smaller item here
    </a>
    <a class="grid-sm">
      Smaller item here
    </a>
  </div>
</div>
    

Answer 1

You may refer to the tutorial from w3schools.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  /* background-color: Tomato; */
  padding: 10px;
}

.grid-container > div {
  background-color: dodgerblue;
  color: white;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

<div class="grid-container">
  <div class="item1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>