Propiedad CSS grid-column-end

La propiedad CSS grid-column-end establece dónde termina un elemento de cuadrícula a lo largo del eje en línea (columnas). Puedes indicar una línea de columna donde detenerlo, o un span que indica cuántas columnas debe abarcar el elemento. Junto con grid-column-start, define los bordes de inicio y fin en línea del área de cuadrícula del elemento.

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

Una cuadrícula está delimitada por líneas numeradas, no por las pistas (columnas) en sí. Una cuadrícula con tres columnas tiene cuatro líneas verticales: la línea 1 recorre el borde izquierdo y la línea 4 el borde derecho.

 line:  1     2     3     4
        | col | col | col |

grid-column-end hace referencia a una de estas líneas:

grid-column-end: 3 hace que el elemento termine en la línea 3 — se detiene antes de la tercera columna.
grid-column-end: span 2 hace que el elemento termine 2 columnas después de donde comienza, independientemente del número de línea absoluto.

También puedes contar desde el final con números negativos: -1 es la última línea, -2 la anterior. Así, grid-column-end: -1 siempre llega al borde derecho de la cuadrícula sin importar cuántas columnas haya — útil para elementos de «ancho completo».

Consejo: el valor solo describe dónde el elemento termina. Dónde comienza lo determina grid-column-start (o se coloca automáticamente). La abreviatura grid-column establece ambos a la vez, p. ej. grid-column: 1 / 3.

Valor inicial	auto
Se aplica a	Elementos de cuadrícula.
Heredado	No.
Animable	Sí. El número de columnas es animable.
Versión	CSS Grid Layout Module Level 1
Sintaxis DOM	object.style.gridColumnEnd = "3";

Sintaxis

Sintaxis de la propiedad CSS grid-column-end

grid-column-end: auto | span n | column-line | initial | inherit;

Ejemplo de la propiedad grid-column-end:

Ejemplo de la propiedad CSS grid-column-end con valor auto

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

Pruébalo tú mismo »

Resultado

Ejemplo de la propiedad grid-column-end con números de línea y valores span:

Ejemplo de la propiedad CSS grid-column-end con valor span n

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

Pruébalo tú mismo »

La cuadrícula superior usa grid-column-end: 3 (un número de línea), por lo que el primer elemento termina en la línea 3 y cubre dos columnas. La cuadrícula inferior usa grid-column-end: span 3, por lo que el elemento abarca tres columnas a partir de su propia posición.

En el siguiente ejemplo, volvemos a usar span para controlar cuántas columnas cubre el elemento.

Ejemplo de la propiedad grid-column-end con el valor "span n":

Ejemplo de la propiedad CSS grid-column-end con el valor 'span n'

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      article {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 25px;
        padding: 20px;
        background-color: #7cbf7c;
      }
      article div {
        text-align: center;
        font-size: 35px;
        background-color: #ffffff;
        padding: 30px 0;
      }
      article div:first-child {
        grid-column-end: span 3;
      }
    </style>
  </head>
  <body>
    <article>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </article>
  </body>
</html>

Pruébalo tú mismo »

En el siguiente ejemplo, el valor aplicado especifica en qué columna debe terminar la visualización del elemento.

Ejemplo de la propiedad grid-column-end con un valor de número de línea:

Ejemplo de la propiedad CSS grid-column-end con el valor 'column-line':

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

Pruébalo tú mismo »

Ejemplo de la propiedad grid-column-end con el valor "auto":

Ejemplo del uso de la propiedad CSS grid-column-end con auto.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 5px;
        background-color: #8ebf42;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
      .box1 {
        grid-column-end: auto;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column-end 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 »

Valores

Valor	Descripción	Pruébalo
auto	Coloca el elemento automáticamente; abarca una sola columna por defecto. Este es el valor inicial.	Pruébalo »
span n	El elemento termina `n` columnas después de su línea de inicio.	Pruébalo »
column-line	Un número de línea (positivo o negativo) o una línea con nombre donde debe terminar el elemento.	Pruébalo »
initial	Establece la propiedad en su valor predeterminado (`auto`).
inherit	Hereda el valor del elemento padre.

Errores comunes

span es relativo, las líneas son absolutas. grid-column-end: 3 siempre se detiene en la línea 3; grid-column-end: span 3 se detiene tres columnas después de la línea de inicio. Confundirlos es el error de cuadrícula más frecuente.
Terminar antes del inicio es válido — el navegador los intercambia. Si grid-column-end resuelve a una línea anterior a grid-column-start, los dos valores se intercambian para que el área siga siendo válida.
grid-column-end solo no mueve el inicio. Establecer solo el fin deja el inicio colocado automáticamente. Para fijar ambos, usa la abreviatura grid-column.

Propiedades relacionadas

grid-column-start — el borde de inicio en línea del elemento.
grid-column — abreviatura para inicio y fin juntos.
grid-row-end — la misma idea en el eje de bloque (fila).
grid-template-columns — define las columnas entre las que discurren estas líneas.

Práctica

¿Qué regula la propiedad 'grid-column-end' en CSS?

Determina la línea donde los elementos de cuadrícula se detienen en su alineación horizontal.Decide el estilo de fuente de los elementos de cuadrícula.Regula la alineación vertical de los elementos de cuadrícula.Determina la ubicación final del elemento de cuadrícula dentro de la estructura de columnas de la cuadrícula.