HTML与WPF布局对比：如何复刻WPF网格的拉伸布局效果？

你可以用CSS Flexbox + Grid组合的方式，完美复刻这段WPF布局的效果，以下是具体实现：

代码实现 #

HTML结构 #

<div class="outer-container">
  <button class="btn-a">A</button>
  <div class="inner-grid">
    <button class="btn-b">B</button>
    <button class="btn-c">C</button>
    <button class="btn-d">D</button>
  </div>
</div>

CSS样式 #

/* 重置默认样式，消除浏览器差异 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 外层容器：对应WPF外层Grid，实现左右分栏 */
.outer-container {
  display: flex;
  height: 100vh; /* 占满整个视口高度，模拟WPF窗口高度 */
}

/* 按钮A：固定宽度200，默认垂直拉伸占满高度 */
.btn-a {
  width: 200px;
}

/* 内层容器：对应WPF内层Grid，用CSS Grid划分布局区域 */
.inner-grid {
  flex: 1; /* 自动填充外层剩余宽度，对应WPF的HorizontalAlignment="Stretch" */
  display: grid;
  grid-template-rows: 150px auto; /* 第一行高度固定150px（对应按钮B的高度），第二行自适应 */
  grid-template-columns: 200px auto; /* 第二行分两列，第一列固定200px（对应按钮C的宽度），第二列自适应拉伸 */
}

/* 按钮B：横跨所有列，占满第一行宽度，实现水平拉伸+顶部对齐 */
.btn-b {
  grid-column: 1 / -1;
}

/* 按钮C：位于第二行第一列，对应WPF的左对齐+固定宽度 */
.btn-c {
  grid-row: 2;
  grid-column: 1;
}

/* 按钮D：位于第二行第二列，自动填充剩余宽度，实现窗口调整时的水平拉伸 */
.btn-d {
  grid-row: 2;
  grid-column: 2;
}

对应WPF布局的逻辑说明 #

• 外层用flex实现左右布局，替代WPF外层Grid的元素排列逻辑，按钮A固定宽度200，内层容器通过flex:1自动占满剩余空间，对应WPF内层Grid的Margin="200,0,0,0"+HorizontalAlignment="Stretch"。
• 内层用CSS Grid划分行和列，完美匹配WPF Grid的区域划分逻辑：第一行高度固定150px对应按钮B的Height="150"，第二行的两列分别对应按钮C的固定宽度和按钮D的拉伸宽度。
• 按钮B通过grid-column:1/-1实现水平拉伸，对应WPF的HorizontalAlignment="Stretch"，同时位于第一行自然实现VerticalAlignment="Top"。
• 按钮C和D通过Grid行列定位，自动实现WPF中Margin的位置控制，按钮D所在的列会随窗口宽度变化自动拉伸。

如果需要支持元素重叠场景（和WPF Grid的层叠逻辑一致），也可以改用相对定位+绝对定位的方式：

.inner-grid {
  flex: 1;
  position: relative;
  height: 100%;
}

.btn-b {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 150px;
}

.btn-c {
  position: absolute;
  top: 150px;
  left: 0;
  width: 200px;
}

.btn-d {
  position: absolute;
  top: 150px;
  left: 200px;
  right: 0;
}

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