写一个布局随父容器大小变化而变化的窗体布局，左边三块，中间两块，右边四块

您可以使用CSS的网格布局（grid layout）来创建一个布局随父容器大小变化而变化的窗体布局。以下是一个示例代码：

<div class="container">
  <div class="left">
    <!-- 左边三块内容 -->
  </div>
  <div class="middle">
    <!-- 中间两块内容 -->
  </div>
  <div class="right">
    <!-- 右边四块内容 -->
  </div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 将容器分成三列，每列宽度相等 */
  grid-template-rows: repeat(2, 1fr); /* 将容器分成两行，每行高度相等 */
  gap: 10px; /* 设置列和行之间的间隙，根据需求调整 */
}

.left {
  grid-column: 1 / span 1; /* 左边三块占据第一列 */
  grid-row: 1 / span 2; /* 左边三块占据前两行 */
}

.middle {
  grid-column: 2 / span 2; /* 中间两块占据第二和第三列 */
  grid-row: 1 / span 1; /* 中间两块占据第一行 */
}

.right {
  grid-column: 2 / span 2; /* 右边四块占据第二和第三列 */
  grid-row: 2 / span 1; /* 右边四块占据第二行 */
}

在上述示例中，`.container` 是父容器，使用网格布局来划分区域。`.left`、`.middle` 和 `.right` 是子容器，并根据网格布局的设定来占据相应的区域。

您可以根据需要调整网格布局的列数、行数以及子容器的位置和大小，以实现您想要的布局效果。