Propiedad CSS grid-column-end

La propiedad grid-column-end especifica cuántas columnas abarcará el elemento de la cuadrícula y en qué columna dejar de mostrar el elemento, definiendo así la posición del extremo en línea de su área de cuadrícula.

Valor inicial	auto
Se aplica a	Elementos de la cuadrícula.
Heredable	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

css

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

html

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

Try it Yourself »

Resultado

CSS grid-column-end Property

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

html

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

Try it Yourself »

En el siguiente ejemplo, hemos especificado cuántas columnas abarcará 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'

html

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

Try it Yourself »

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':

html

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

Try it Yourself »

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

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

html

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

Try it Yourself »

Valores

Valor	Descripción	Probarlo
auto	Se abarcará solo una columna. Este es el valor predeterminado de esta propiedad.	Probarlo »
span n	Especifica el número de columnas.	Probarlo »
column-line	Especifica el número o nombre de la línea de columna donde debe terminar el elemento.	Probarlo »

Práctica

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

Determina la línea donde los elementos de la cuadrícula dejarán de alinearse horizontalmente.Decide el estilo de fuente de los elementos de la cuadrícula.Regula la alineación vertical de los elementos de la cuadrícula.Determina la ubicación final del elemento de la cuadrícula dentro de la estructura de columnas de la cuadrícula.

Propiedad CSS grid-column-end ​

Sintaxis ​

Ejemplo de la propiedad grid-column-end: ​

Resultado ​

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

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

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

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

Valores ​

Práctica ​

Propiedad CSS grid-column-end

Sintaxis

Ejemplo de la propiedad grid-column-end:

Resultado

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

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

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

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

Valores

Práctica