CSS gap decorations playground

Explore gap decorations with a multi-row, multi-column grid. Adjust row-rule, column-rule, insets, breaks, visibility, and overlap to generate modern CSS.

Presets

Choose a configuration as a starting point, then adjust any control.

Configuration

CSS output

Shorthand output groups values into CSS shorthands when possible. Individual output generates one declaration per property so each value can be reviewed or copied separately.

ShorthandIndividual

Application

Choose whether rules apply to column gaps, row gaps, or both grid axes.

ColumnsRowsRows and columns

Layout

Edit row-gap and column-gap separately

Switches between a single gap value and independent values for the grid rows and columns.

ColumnsColumn rules can use different widths, styles, and colors per gap, including repeat() just like CSS Grid.

column-rule-style

Sets the stroke style for column rules with values such as solid, dashed, dotted, double, groove, or ridge.

column-rule-color

Sets the color of column rules.

column-rule-break

Controls how column rules behave at intersections: normal, none, or intersection.

column-rule-visibility-items

Decides when column rules appear based on adjacent items: all, around, between, or normal.

RowsRow rules can use different widths, styles, and colors per gap, including repeat() just like CSS Grid.

row-rule-style

Sets the stroke style for row rules with values such as solid, dashed, dotted, double, groove, or ridge.

row-rule-color

Sets the color of row rules.

row-rule-break

Controls how row rules behave at intersections: normal, none, or intersection.

row-rule-visibility-items

Decides when row rules appear based on adjacent items: all, around, between, or normal.

rule-overlap

When row and column rules cross, decides which axis is painted above the other.

One

Two

Three

Wide

Five

Six

Seven

HTML

<div class="gap-decorations">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
  <div class="item">Wide</div>
  <div class="item">Five</div>
  <div class="item">Six</div>
  <div class="item">Seven</div>
</div>

Tailwind CSS

Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.

<div class="grid grid-cols-3 gap-[28px] [column-rule:3px_solid_#8b5cf6] [row-rule:3px_dashed_#10b981] [rule-inset:0px] [rule-break:intersection] [rule-visibility-items:between] [rule-overlap:row-over-column] *:grid *:min-block-20 *:place-items-center *:rounded-lg *:bg-[color-mix(in_oklch,_white_82%,_#8b5cf6)] *:text-[#172033] *:nth-4:col-span-2">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Wide</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
</div>

CSS

.gap-decorations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  column-rule: 3px solid #8b5cf6;
  row-rule: 3px dashed #10b981;
  rule-inset: 0px;
  rule-break: intersection;
  rule-visibility-items: between;
  rule-overlap: row-over-column;
}

.gap-decorations > .item {
  min-block-size: 5rem;
  display: grid;
  place-items: center;
  border-radius: 0.5rem;
  background: color-mix(in oklch, white 82%, #8b5cf6);
  color: #172033;
}

.gap-decorations > .item:nth-child(4) {
  grid-column: span 2;
}

.gap-decorations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  column-rule: 3px solid #8b5cf6;
  row-rule: 3px dashed #10b981;
  rule-inset: 0px;
  rule-break: intersection;
  rule-visibility-items: between;
  rule-overlap: row-over-column;

  > .item {
    min-block-size: 5rem;
    display: grid;
    place-items: center;
    border-radius: 0.5rem;
    background: color-mix(in oklch, white 82%, #8b5cf6);
    color: #172033;
  }

  > .item:nth-child(4) {
    grid-column: span 2;
  }
}