CSS图文混排技巧：grid-template-areas与媒体查询应用

<div class="container">
  <header class="header">Header</header>
  <main class="content">文章内容</main>
  <aside class="sidebar">图片或侧边栏</aside>
  <footer class="footer">Footer</footer>
</div>

.container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    "header header"
    "content sidebar"
    "footer footer";
  gap: 16px;
}
<p>.header { grid-area: header; }
.content { grid-area: content; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }</p>

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "footer";
  }
}

.grid-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "text1 image1"
    "image2 text2"
    "text3 image3";
  gap: 20px;
}
<p>.text-block-1 { grid-area: text1; }
.image-block-1 { grid-area: image1; }
.text-block-2 { grid-area: text2; }
.image-block-2 { grid-area: image2; }
.text-block-3 { grid-area: text3; }
.image-block-3 { grid-area: image3; }</p><p>/<em> 移动端改为单列 </em>/
@media (max-width: 768px) {
.grid-layout {
grid-template-columns: 1fr;
grid-template-areas:
"text1"
"image1"
"image2"
"text2"
"text3"
"image3";
}
}</p>