如何不修改HTML将容器内第二个div设为侧边栏并实现指定布局？

需求说明 #

不修改现有HTML结构，将容器内的.item2设置为侧边栏，使四个元素按目标布局排列。

现有HTML结构 #

<div class="container">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2</div>
  <div class="item item3">Item 3</div>
  <div class="item item4">Item 4</div>
</div>

CSS实现方案 #

使用CSS Grid可以轻松实现该布局，无需调整HTML顺序：

.container {
  display: grid;
  /* 左侧列自适应宽度，侧边栏固定200px，可根据需求修改 */
  grid-template-columns: 1fr 200px;
  /* 定义网格区域，让item2占据右侧整列 */
  grid-template-areas:
    "item1 item2"
    "item3 item2"
    "item4 item2";
  /* 元素间的间距，可按需调整 */
  gap: 12px;
  padding: 12px;
}

.item1 { grid-area: item1; }
.item2 { grid-area: item2; }
.item3 { grid-area: item3; }
.item4 { grid-area: item4; }

/* 可选：基础样式，方便查看布局效果 */
.item {
  padding: 1.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #f8f9fa;
}

方案说明 #

• 通过grid-template-columns划分布局列，左侧自适应、右侧固定宽度适配侧边栏需求；
• grid-template-areas直接指定每个元素的位置，让.item2纵向占据右侧所有行，其余元素依次排列在左侧；
• gap属性控制元素间的间距，避免元素紧贴；
• 可选的基础样式用于可视化布局，实际项目中可根据需求调整。

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