Gap

Every site needs the ability to customize the horizontal and vertical distance between elements. You can plug in to Grail's CSS variables to do so, or you can attempt to customize individual elements (i.e. do it yourself).

Overwriting Grail's CSS variables

Grail exposes two CSS variables that you can overwrite to achieve the look you want.

:root {
  --grail-layout-gap-inline: 32px !important;
  --grail-layout-gap-block: 8px !important;
}

See the following table for defaults, names, and directions.

Do it yourself

You can apply gap values directly to the body element. This may not work as well, especially if you're using containers nested in each of the grail elements. If you opt for this route, you may want to set the Grail defaults (see previous section) to zero before you begin.