如何增大PrimeFlex grid间距？gap类未生效反而生成4行？

你的代码出现4行的原因是col-6如果以百分比宽度（而非网格列跨度）计算，加上gap后总宽度会超出容器，导致每个元素被迫换行。以下是两种可行的解决方法：

方法一：直接定义网格列数（推荐） #

使用grid-cols-2明确设置2列布局，配合gap-*类控制间距，无需再用col-6：

<div class="grid grid-cols-2 gap-4">
  <div><p-button label="Click"></p-button></div>
  <div><p-button label="Click"></p-button></div>
  <div><p-button label="Click"></p-button></div>
  <div><p-button label="Click"></p-button></div>
</div>

方法二：保留col-6的正确用法 #

如果要继续使用col-6，需确保网格容器采用12列网格布局，让col-6作为网格列跨度生效，而非百分比宽度：

<div class="grid grid-cols-12 gap-4">
  <div class="col-6"><p-button label="Click"></p-button></div>
  <div class="col-6"><p-button label="Click"></p-button></div>
  <div class="col-6"><p-button label="Click"></p-button></div>
  <div class="col-6"><p-button label="Click"></p-button></div>
</div>

原理说明 #

PrimeFlex的grid-cols-N类会直接设置grid-template-columns: repeat(N, minmax(0, 1fr))，网格项会自动适配列宽，gap是网格线之间的间距，不会影响列宽计算，因此不会出现换行问题。而如果col-6被错误解析为width:50%，加上gap后总宽度会超过容器，触发换行。

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