How to span columns differently for each row within a nested grid using CSS Grid?

Question

I am trying to build like the below in the main content in the website layout.

• Row 1: "Title text (2 columns) + Image (1 column)"
• Row 2: "Box + Box + Box"
• Row 3: "Box + Box + Box"

Issues:

1. Tried to make "Row 1" as "title-block" and make it span 3 rows. then splitting it into 2 (title-text for 2 rows and image in the last row).
2. Also from 2nd row.. wanted three blocks and can fill in text or image. But they are all filling up in 1 box.

Screenshot also attached below.

Where am i going wrong? I saw several examples, some are either using %'s (do not want to use) or using some complex math (n-th..) which i was not able to understand.

.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

Does this work for you? This is how I understood your requirement, using CSS Grid of course, if this needs some changes let me know to update it

.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>