Propiedad CSS grid-column – Números de línea, span y nombres

La propiedad CSS grid-column es un shorthand que coloca un elemento de cuadrícula a lo largo del eje horizontal (en línea). Define dónde comienza y dónde termina el elemento, lo que en conjunto determina su posición en la columna y cuántas columnas abarca. Combina las dos propiedades individuales:

grid-column-start — la línea de columna donde comienza el elemento.
grid-column-end — la línea de columna donde termina el elemento.

Una cuadrícula se divide mediante líneas de cuadrícula, y grid-column funciona haciendo referencia a esas líneas en lugar de a las celdas entre ellas. En una cuadrícula de cuatro columnas hay cinco líneas verticales, numeradas del 1 al 5 de izquierda a derecha (o de −5 a −1 contando desde la derecha).

Nota: grid-column solo controla la ubicación a lo largo de las columnas. Para posicionar un elemento a lo largo de las filas, usa grid-row. Para ubicar un elemento tanto en fila como en columna a la vez, usa grid-area.


Valor inicial	`auto / auto`
Se aplica a	Elementos de cuadrícula
Heredable	No
Animable	Sí
Especificación	CSS Grid Layout Level 1
Sintaxis DOM	`object.style.gridColumn = "1 / span 3"`

Sintaxis

/* Two explicit line numbers */
grid-column: <start-line> / <end-line>;

/* Start line + span count */
grid-column: <start-line> / span <number>;

/* Span by named line */
grid-column: span <name>;

/* Single value (sets start; end defaults to auto) */
grid-column: <start-line>;

/* Global keywords */
grid-column: initial | inherit | unset | revert;

Formas de valor

Hay cuatro formas comunes de escribir grid-column:

Forma	Ejemplo	Qué hace
Dos números de línea	`2 / 4`	Comienza en la línea 2, termina en la línea 4 (abarca las columnas 2–3)
Inicio + cantidad de span	`2 / span 2`	Comienza en la línea 2, abarca 2 columnas hacia adelante
Número de línea negativo	`1 / -1`	Abarca desde la primera hasta la última línea (ancho completo)
Líneas con nombre	`content-start / content-end`	Usa nombres definidos en `grid-template-columns`
Valor único	`3`	Define `grid-column-start: 3`; el final es `auto` (una columna)

Cuando se escribe un solo valor (sin /), solo se establece grid-column-start; grid-column-end toma auto por defecto, colocando el elemento en una única pista de columna.

Cómo se numeran las líneas de cuadrícula

Las líneas de cuadrícula se cuentan desde 1 en el borde de inicio (izquierda en diseños de izquierda a derecha). También se pueden usar números negativos para contar desde el borde final, de modo que −1 siempre hace referencia a la última línea sin importar cuántas columnas existan.

Column tracks:  [  1  ][  2  ][  3  ][  4  ]
Line numbers:  1       2      3      4       5
Negative:     -5      -4     -3     -2      -1

Esto significa que grid-column: 1 / -1 siempre hace que un elemento ocupe el ancho completo de la cuadrícula explícita, independientemente del número de columnas.

Ejemplos

Colocar un elemento con números de línea explícitos

La caja 6 se coloca entre las líneas de columna 2 y 4, por lo que abarca las columnas 2 y 3.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #666;
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
      .box6 {
        grid-column: 2 / 4;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column property example</h2>
    <div class="grid-container">
      <div class="box1">1</div>
      <div class="box2">2</div>
      <div class="box3">3</div>
      <div class="box4">4</div>
      <div class="box5">5</div>
      <div class="box6">6</div>
      <div class="box7">7</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Colocar el primer elemento con `1 / 3`

La caja 1 se coloca con grid-column: 1 / 3, lo que ocupa las dos primeras pistas de columna.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #888;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box1 {
        grid-column: 1 / 3;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column property example</h2>
    <div class="grid-container">
      <div class="box1">1</div>
      <div class="box2">2</div>
      <div class="box3">3</div>
      <div class="box4">4</div>
      <div class="box5">5</div>
      <div class="box6">6</div>
      <div class="box7">7</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Usar `span` y un elemento de ancho completo con `1 / -1`

La palabra clave span es útil cuando se sabe cuántas columnas cubrir pero no el número de la línea final. Una línea final negativa (-1) siempre llega hasta la última línea de columna, haciendo que el elemento se extienda por todo el ancho de la cuadrícula explícita.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #4caf50;
        color: #fff;
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
      .featured {
        grid-column: 1 / span 2; /* starts at line 1, covers 2 columns */
      }
      .full-width {
        grid-column: 1 / -1; /* spans the whole explicit grid */
      }
    </style>
  </head>
  <body>
    <h2>span and full-width example</h2>
    <div class="grid-container">
      <div class="featured">Featured (2 cols)</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div class="full-width">Full width (1 / -1)</div>
    </div>
  </body>
</html>

Colocar elementos con líneas con nombre

Se pueden nombrar las líneas de cuadrícula en grid-template-columns usando la sintaxis de corchetes, y luego hacer referencia a esos nombres en grid-column. Esto hace que los diseños sean más legibles y resistentes a los cambios en el número de columnas.

<!DOCTYPE html>
<html>
  <head>
    <title>Named grid lines</title>
    <style>
      .grid-container {
        display: grid;
        /* Names the lines around the middle two columns */
        grid-template-columns:
          [full-start] 1fr
          [content-start] 2fr 2fr
          [content-end] 1fr
          [full-end];
        gap: 10px;
        background-color: #eee;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #5c6bc0;
        color: #fff;
        text-align: center;
        padding: 20px 0;
        font-size: 18px;
      }
      .sidebar {
        grid-column: full-start / content-start; /* first column only */
      }
      .main {
        grid-column: content-start / content-end; /* middle two columns */
      }
      .aside {
        grid-column: content-end / full-end; /* last column only */
      }
    </style>
  </head>
  <body>
    <h2>Named lines example</h2>
    <div class="grid-container">
      <div class="sidebar">Sidebar</div>
      <div class="main">Main content</div>
      <div class="aside">Aside</div>
    </div>
  </body>
</html>

Valores

Valor	Descripción
`<line-number>`	Un número de línea entero (positivo cuenta desde el inicio, negativo desde el final).
`<line-name>`	Un nombre personalizado definido en `grid-template-columns`.
`span <number>`	Abarca el número de pistas de columna indicado.
`span <name>`	Se extiende hasta la siguiente línea con el nombre indicado.
`auto`	El navegador coloca el elemento automáticamente (valor por defecto).
`initial`	Restablece al valor por defecto (`auto / auto`).
`inherit`	Hereda el valor calculado del elemento padre.
`unset`	Actúa como `inherit` si la propiedad es heredable; de lo contrario, como `initial`.

Errores comunes

1 / -1 solo abarca la cuadrícula explícita. Si los elementos se colocan en la cuadrícula implícita (filas/columnas adicionales que el navegador crea automáticamente), una línea final negativa no se extiende a esas pistas. Define primero la cuadrícula completa con grid-template-columns.
span sin una línea de inicio. Escribir grid-column: span 3 solo define grid-column-end: span 3; el inicio es auto, por lo que el navegador lo elige según el flujo automático. Esto es válido, pero la ubicación depende del orden del flujo automático.
Búsqueda de líneas con nombre. Cuando se hace referencia a un nombre que no existe en la plantilla, el navegador lo trata como auto. Siempre verifica el nombre en grid-template-columns.
Shorthand de valor único. grid-column: 3 define el inicio en la línea 3 y el final en auto — no en la línea 4. El elemento ocupa exactamente una pista de columna a menos que el final colocado automáticamente abarque más.

Propiedades relacionadas

grid-column-start y grid-column-end — las dos propiedades individuales que grid-column combina.
grid-row — el equivalente en el eje vertical; misma sintaxis, aplicada a filas.
grid-area — define la ubicación en fila y columna en una sola declaración.
grid-template-columns — define las pistas de columna y las líneas con nombre a las que apunta grid-column.
grid-template-rows — define las pistas de fila y las líneas con nombre para grid-row.
grid-auto-columns — controla el tamaño de las pistas de columna creadas implícitamente.
grid — el shorthand todo-en-uno de la cuadrícula.

Práctica

¿Cuál es la funcionalidad de la propiedad 'grid-column' en CSS?

Se utiliza para ajustar el relleno de las celdas de la cuadrícula.Se utiliza para alinear el contenido horizontalmente dentro de una celda de la cuadrícula.Se utiliza para determinar la ubicación de un elemento de cuadrícula y su extensión dentro de las pistas horizontales de la cuadrícula.Se utiliza para definir el ancho de las celdas de la cuadrícula.Se utiliza para especificar una línea, un span o ninguno.