How can I increase the gap of a PrimeFlex grid?

Question

The PrimeFlex gap classes don't seem to work with grid.

How do I get this to increase the gap, instead of creating 4 rows?

<div class="grid gap-1">
  <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>

Answer 1

You could build your own PrimeFlex using the SASS variable $gutter. It is the padding of a grid column and defaults to .5rem.

See https://www.primefaces.org/primeflex/setup

If you want to override the gutter for certain grids, you will have to add custom CSS. The gutter ends up in the generated CSS like:

.col { padding: .5rem; }
.col-1 { padding: .5rem; }
...
.col-12 { padding: .5rem; }

So, if you want to use a gutter of 1rem for example, you could override it like:

.my-gutter [class*=col] { padding: 1rem; }

And use it like:

<div class="grid my-gutter">
  ...
</div>

See also:

• https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors