如何使用 CSS Grid 为嵌套网格中的每一行以不同的方式跨越列？

Question

我正在尝试在网站布局的主要内容中进行如下构建。

• 第 1 行：“标题文本（2 列）+ 图片（1 列）”
• 第 2 行：“盒子 + 盒子 + 盒子”
• 第 3 行：“盒子 + 盒子 + 盒子”

问题：

1. 尝试将“第 1 行”设为“标题栏”并使其跨越 3 行。然后将其拆分为 2（2 行的标题文本和最后一行的图像）。
2. 也从第 2 行.. 想要三个块，可以填写文本或图像。但它们都装在 1 个盒子里。

下面还附有截图。

我哪里出错了？我看到了几个例子，有些要么使用 %'s（不想使用），要么使用一些我无法理解的复杂数学（n-th..）。

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