Как по-разному охватить столбцы для каждой строки во вложенной сетке с помощью CSS Grid?

Question

Я пытаюсь встроить, как показано ниже, в основной контент в макете сайта.

• Строка 1: «Текст заголовка (2 столбца) + Изображение (1 столбец)»
• Строка 2: «Коробка + Коробка + Коробка»
• Строка 3: «Коробка + Коробка + Коробка»

Вопросы:

1. Попытка сделать "Строку 1" как "блок заголовка" и охватить 3 строки. затем разделить его на 2 (текст заголовка для 2 строк и изображение в последнем ряду).
2. Также из 2-го ряда .. хотел три блока и может заполнить текст или изображение. Но все они заполняются в 1 коробку.

Скриншот также прилагается ниже.

Где я иду не так? Я видел несколько примеров, некоторые либо используют% (не хотят использовать), либо используют сложную математику (n-й ..), которую я не смог понять.

.main {

    display: grid;

    background-color: indianred;
    padding: 20px;

    grid-template-areas: 
        "title-block title-block title-block"
        "box box box"
        "box box box";

    grid-template-columns: 1fr, 1fr, 1fr;
    //grid-template-rows: repeat(3, [row] auto  );
    grid-gap: 10px;
}
  
.main > * {
    //background-color: yellowgreen;
    padding: 20px;
}

img {
    width: 50%;
}

.title-block {       
    background-color: lightsalmon; 
    grid-column: span 3;
    grid-row: span 1;
}

.title-text {    
    grid-column: 1 / span 2;
    grid-row: 1;
}

.title-image {
    grid-column: 3 / span 1;
    grid-row: 1;    
}

.tech {
    grid-area: box;
    background-color: lightcyan;
    grid-column: span 3;
    grid-row: span 1;
}

.books {
    grid-area: box;
    background-color: violet;
    grid-column: span 3;
    grid-row: span 1;
}

<div class="main">

  <div class="title-block">
    <div class=title-text><h1>Software Developer, Architect, Open-Source Evangelist, Inventor, Mentor, Blogger, Author, Speaker</h1></div>
    <div class=title-image><img src="https://upload.wikimedia.org/wikipedia/en/7/70/Bob_at_Easel.jpg"></div>
  </div>

  <div class="tech">
    <div>Tech 1</div>
    <div>Tech 2</div>
    <div>Tech 3</div>
  </div>

  <div class="books">
    <div>Book 1</div>
    <div>Book 2</div>
    <div>Book 3</div>
  </div>

</div>

Answer 1

Это работает для вас? Вот как я понял ваше требование, используя CSS Grid, конечно, если для этого потребуются некоторые изменения, дайте мне знать, чтобы обновить его

.main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(70px, auto);
  background-color: indianred;
  grid-gap: 10px;
  padding: 20px;
}

.title-block, .tech, .books {
  grid-column: span 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.title-text {
  grid-column: span 2;
  border: 1px solid #000;
}

.title-image{
  border: 1px solid #000;
}

.title-image img{
  width: 70%;
  display: block;
}

.tech {
  background-color: lightcyan;
}

.tech div, .books div{
  border: 1px solid #000;
}

.books {
  background-color: violet;
}

<div class="main">

  <div class="title-block">
    <div class=title-text>
      <h1>Software Developer, Architect, Open-Source Evangelist, Inventor, Mentor, Blogger, Author, Speaker</h1>
    </div>
    <div class=title-image><img src="https://upload.wikimedia.org/wikipedia/en/7/70/Bob_at_Easel.jpg"></div>
  </div>

  <div class="tech">
    <div>Tech 1</div>
    <div>Tech 2</div>
    <div>Tech 3</div>
  </div>

  <div class="books">
    <div>Book 1</div>
    <div>Book 2</div>
    <div>Book 3</div>
  </div>

</div>

Answer 2

Это то, что вы ищете?

.main {
    background-color: indianred;
}
  
.main > * {
    //background-color: yellowgreen;
    padding: 20px;
}

img {
    width: 50%;
}

.title-block {       
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.title-text {    
    width: calc(2 * (100% / 3))
}

.title-image {
    width: calc(1 * (100% / 3))   
}

.tech {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.books {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

<div class="main">

  <div class="title-block">
    <div class=title-text><h1>Software Developer, Architect, Open-Source Evangelist, Inventor, Mentor, Blogger, Author, Speaker</h1></div>
    <div class=title-image><img src="https://upload.wikimedia.org/wikipedia/en/7/70/Bob_at_Easel.jpg"></div>
  </div>

  <div class="tech">
    <div>Tech 1</div>
    <div>Tech 2</div>
    <div>Tech 3</div>
  </div>

  <div class="books">
    <div>Book 1</div>
    <div>Book 2</div>
    <div>Book 3</div>
  </div>

</div>