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

Question

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

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

问题：

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

下面也附有屏幕截图。

我要去哪里错了？我看到了几个示例，其中一些正在使用％的（不想使用）或正在使用一些我无法理解的复杂数学（第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理解您的要求的方式，如果需要一些更改，请让我知道对其进行更新

public class Account {
    private int studentId;
    ...
    CircularFifoQueue<Integer> lastTransactions = new CircularFifoQueue<Integer>(6);
}

public class StudentPrint {
    LinkedList<Account> accountList = new LinkedList<Account>();
}

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

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>