需要帮助创建一个简单的html css网格布局

我对css和idk还是个新手，如何使用网格和Flexbox制作这种布局(6个框) (https://i.stack.imgur.com/zycwb.png)

我能想到的唯一方法是创造出这样的东西 (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>

任何形式的帮助都将不胜感激