Need help creating a simple html css grid layout

Issue

I'm fairly new into css and idk how to make this kinda layout(the 6 boxes) using grids and flexbox (https://i.stack.imgur.com/zycwb.png)

The only way I can think of to create that looks like this (https://i.stack.imgur.com/P2wxm.png)

<template>
    <div class="container">
      <div class="row">
        <div class="col text-center">
          <h3>Best Of The Best</h3>
          <p>Sebuah lembaga pendidikan yang didedikasikan untuk memaksimalkan potensi anak bangsa.</p>
        </div>
      </div>
      <div class="hero-box-container">
        <div class="hero-box hero-box-1">1</div>
        <div class="hero-box hero-box-2">2</div>
        <div class="hero-box hero-box-3">3</div>
        <div class="hero-box hero-box-4">4</div>
        <div class="hero-box hero-box-5">5</div>
        <div class="hero-box hero-box-6">6</div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'Hero',
  };
  </script>
  
  <style scoped>
.hero-box-container {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  grid-template-rows: 200px 200px;
}

.hero-box-1 {
  background-color: #70e9c9;
}

.hero-box-2 {
  background-color: #63dbbb;
}

.hero-box-3 {
  background-color: #51c9a9;

}

.hero-box-4 {
  background-color: #3dafa0;
}

.hero-box-5 {
  background-color: #309d96;
}

.hero-box-6 {
  background-color: #1e897a;
}
</style>

any kind of help would be much appreciated

Solution

Consider defining a grid with more column and row tracks. Have certain items fill more than one row or column track as needed to produce the desired appearance:

.hero-box-container {
  display: grid;
  grid-template-columns: 40% 23% 4% 23%;
  grid-template-rows: 300px 50px 200px;
}

.hero-box-1 {
  background-color: #70e9c9;
  grid-row: 1 / 3;
}

.hero-box-2 {
  background-color: #63dbbb;
  grid-column: 2 / 4;
}

.hero-box-3 {
  background-color: #51c9a9;
}

.hero-box-4 {
  background-color: #3dafa0;
  grid-row: 3;
}

.hero-box-5 {
  background-color: #309d96;
  grid-row: 2 / 4;
}

.hero-box-6 {
  background-color: #1e897a;
  grid-row: 2 / 5;
  grid-column: 3 / 5;
}

<div class="container">
  <div class="row">
    <div class="col text-center">
      <h3>Best Of The Best</h3>
      <p>Sebuah lembaga pendidikan yang didedikasikan untuk memaksimalkan potensi anak bangsa.</p>
    </div>
  </div>
  <div class="hero-box-container">
    <div class="hero-box hero-box-1">1</div>
    <div class="hero-box hero-box-2">2</div>
    <div class="hero-box hero-box-3">3</div>
    <div class="hero-box hero-box-4">4</div>
    <div class="hero-box hero-box-5">5</div>
    <div class="hero-box hero-box-6">6</div>
  </div>
</div>

Answered By - Wongjn