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.

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.

Shorthand Individual

Application

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

Columns Rows Rows and columns

Layout

Columns

Column 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.

Rows

Row 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>

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;
}