CSS Grid布局问题：避免右侧列扩展挤压左侧相邻内容

要解决右侧列撑开后挤压左侧下方元素的问题，无需修改HTML结构，只需调整Grid的行跨度和响应式布局规则即可：

1. 核心布局调整
   给右侧的top-right元素设置跨两行的属性，让它占据右侧列的全部垂直空间；同时让左侧的image和description各自占据独立的行轨道，行高度由自身内容决定——这样description就会紧贴image底部，不受右侧元素高度影响。

   示例CSS：

   .container {
     display: grid;
     grid-template-columns: 1fr 1fr; /* 两列布局 */
     grid-template-rows: auto auto; /* 两行，高度自适应内容 */
     gap: 1rem; /* 可选，根据需求调整间距 */
   }
   
   .image {
     grid-column: 1;
     grid-row: 1;
   }
   
   .top-right {
     grid-column: 2;
     grid-row: 1 / span 2; /* 让右侧元素跨两行 */
   }
   
   .description {
     grid-column: 1;
     grid-row: 2;
   }
   

2. 响应式适配（小屏幕）
   在断点处重置Grid为单列布局，按需求指定元素顺序，确保description始终在底部：

   @media (max-width: 768px) {
     .container {
       grid-template-columns: 1fr;
       grid-template-rows: auto auto auto;
     }
   
     .image {
       grid-row: 1;
     }
   
     .top-right {
       grid-column: 1;
       grid-row: 2;
     }
   
     .description {
       grid-row: 3; /* 固定在底部 */
     }
   }
   

这个方案的关键是利用grid-row: 1 / span 2让右侧元素跨两行，左侧两个元素各自占用独立行轨道，行高度由自身内容决定，彻底避免了右侧元素高度对左侧布局的挤压，同时保留了响应式调整元素顺序的灵活性，完全不需要修改原有HTML结构。

内容的提问来源于stack exchange，提问作者James Ives