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.

Presets

Elige una configuración como punto de partida y ajusta después cualquier control.

Configuración

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.

AbreviadaIndividual

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.

ColumnasFilasFilas y columnas

Layout

Editar row-gap y column-gap por separado

Cambia entre un único valor gap y valores independientes para las filas y columnas de la grid.

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

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

Tailwind CSS

Algunas clases con valores arbitrarios pueden sustituirse por clases nativas, según el valor y la configuración de Tailwind CSS.

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