Playground de gap decorations en CSS

Explora gap decorations con una grid de varias filas y columnas. Ajusta row-rule, column-rule, insets, cortes, visibilidad y overlap para generar CSS moderno.

Salida CSS

La salida abreviada agrupa valores en shorthands CSS cuando es posible. La salida individual genera una declaración por cada propiedad para revisar o copiar cada valor por separado.

Abreviada Individual

Aplicación

Elige si las reglas se aplican a los gaps de columnas, a los gaps de filas o a ambos ejes de la grid.

Columnas Filas Filas y columnas

Layout

Columnas

Las reglas de columna pueden usar distintos anchos, estilos y colores por gap, incluso con repeat() igual que en CSS Grid.

column-rule-style

Define el trazo de las reglas de columna con valores como solid, dashed, dotted, double, groove o ridge.

column-rule-color

Define el color de las reglas de columna.

column-rule-break

Controla cómo se comportan las reglas de columna en las intersecciones: normal, none o intersection.

column-rule-visibility-items

Decide cuándo aparecen las reglas de columna según los items adyacentes: all, around, between o normal.

Filas

Las reglas de fila pueden usar distintos anchos, estilos y colores por gap, incluso con repeat() igual que en CSS Grid.

row-rule-style

Define el trazo de las reglas de fila con valores como solid, dashed, dotted, double, groove o ridge.

row-rule-color

Define el color de las reglas de fila.

row-rule-break

Controla cómo se comportan las reglas de fila en las intersecciones: normal, none o intersection.

row-rule-visibility-items

Decide cuándo aparecen las reglas de fila según los items adyacentes: all, around, between o normal.

rule-overlap

Cuando las reglas de filas y columnas se cruzan, decide qué eje se pinta por encima del otro.

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