CSSGrid图文布局技巧详解

<div class="grid-layout">
  <img src="image.jpg" alt="示例图片" class="grid-image">
  <div class="grid-text">
    <h3>标题内容</h3>
    <p>这里是描述性文字内容，用于配合图片进行说明……</p>
  </div>
</div>

.grid-layout {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 图片占1份，文字占2份 */
  gap: 20px;
  align-items: center; /* 垂直居中对齐 */
}
<p>.grid-image {
width: 100%;
height: auto;
border-radius: 8px;
}</p>

.grid-layout:nth-child(even) {
  flex-direction: row-reverse; /* 在 Flex 中可用，但在 Grid 中需用 grid-column 调整 */
}

.alternate-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
  align-items: center;
}
<p>.alternate-layout:nth-child(odd) .grid-image {
grid-column: 1;
}</p><p>.alternate-layout:nth-child(odd) .grid-text {
grid-column: 2;
}</p><p>.alternate-layout:nth-child(even) .grid-image {
grid-column: 2;
}</p><p>.alternate-layout:nth-child(even) .grid-text {
grid-column: 1;
}</p>

@media (max-width: 768px) {
  .grid-layout {
    grid-template-columns: 1fr;
    text-align: center;
  }
<p>.grid-image {
order: -1; /<em> 让图片显示在文字上方 </em>/
}
}</p>