CSSGrid图文布局技巧详解

  
  

    
标题内容
    
这里是描述性文字内容，用于配合图片进行说明……
  

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

.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;
}
.alternate-layout:nth-child(odd) .grid-image {
grid-column: 1;
}
.alternate-layout:nth-child(odd) .grid-text {
grid-column: 2;
}
.alternate-layout:nth-child(even) .grid-image {
grid-column: 2;
}
.alternate-layout:nth-child(even) .grid-text {
grid-column: 1;
}

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