如何在Angular/PrimeNG 14中实现网格的水平与垂直拉伸？

我需要在Angular/PrimeNG 14中实现可同时水平和垂直拉伸的网格。之前找的网格示例在Angular 14环境下无法正常运行，目前用多年前的方案实现了水平与垂直拉伸的效果（效果如下），但不确定这是不是Angular/PrimeNG 14的正确用法，也没找到适配该版本的不规则网格示例，想咨询正确的实现方式。

当前可用的HTML及样式代码：

现有HTML代码 #

<h5>Grid Demo</h5>

<div class="vertical-container" style="height: 85vh;">
<div class="grid flex" style="height: 50%;">
  <div class="col-4 row" style="height: 100%;">
    <div class="box box-stretched">
      0,0
    </div>
  </div>
  <div class="col-8"  style="height: 100%;">
    <div class="box box-stretched">
      0,1
    </div>
  </div>
</div>
<div class="grid flex" style="height: 50%;">
  <div class="col-4">
    <div class="box box-stretched">
      1,0
    </div>
  </div>
  <div class="col-8">
  </div>
</div>
</div>

现有样式代码 #

.box {
  background-color: var(--surface-e);
  text-align: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-radius: 4px;
  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2),
    0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
}

.box-stretched {
  height: 100%;
}

.vertical-container {
  margin: 0;
  height: 100%;
  background: var(--surface-d);
  border-radius: 4px;
}

适配Angular/PrimeNG 14的正确实现方式 #

PrimeNG 14搭配的PrimeFlex 3.x版本提供了完善的flex布局工具类，无需手动设置百分比高度，以下是符合最佳实践的实现方案：

1. 确保已安装并引入PrimeFlex

首先确认项目中已安装PrimeFlex 3.x（适配Angular14的版本），并在angular.json中引入样式：

"styles": [
  "node_modules/primeflex/primeflex.css",
  // 其他样式文件
]

2. 重构后的代码

HTML部分

<h5>Grid Demo</h5>

<div class="h-[85vh] bg-surface-d rounded-md p-2 flex flex-col gap-2">
  <!-- 第一行网格 -->
  <div class="grid flex-1 gap-2">
    <div class="col-4 flex">
      <div class="box flex-1">0,0</div>
    </div>
    <div class="col-8 flex">
      <div class="box flex-1">0,1</div>
    </div>
  </div>

  <!-- 第二行网格 -->
  <div class="grid flex-1 gap-2">
    <div class="col-4 flex">
      <div class="box flex-1">1,0</div>
    </div>
    <div class="col-8"></div>
  </div>
</div>

CSS部分（简化后）

.box {
  background-color: var(--surface-e);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2),
    0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
}

方案说明

• 用PrimeFlex的工具类替代内联样式：h-[85vh]设置容器高度，flex flex-col让子网格垂直排列，flex-1让每行网格自动填充剩余垂直空间
• 每个列容器添加flex，内部的.box用flex-1实现水平和垂直双向拉伸，无需手动设置height:100%
• 用gap-2控制网格间距，替代自定义margin/padding，更符合PrimeFlex的设计规范
• 简化.box样式，用flex布局实现内容居中，减少冗余代码

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