Propiedad grid-column de CSS

La propiedad grid-column define el tamaño y la ubicación de los elementos de la cuadrícula en un diseño de cuadrícula. Es una abreviatura de las siguientes propiedades:

Valor inicial	auto auto
Se aplica a	Elementos de la cuadrícula.
Heredado	No.
Animable	Sí. Los elementos son animables.
Versión	CSS Grid Layout Module Level 1
Sintaxis DOM	object.style.gridColumn = "1/ span 3";

Sintaxis

Sintaxis de la propiedad grid-column de CSS

css

grid-column: <start-line> / <end-line> | <start-line> / span <end-line> | <global>;

Nota: <global> representa palabras clave globales de CSS como initial, inherit, unset y revert. Se aplican a todo el valor de la propiedad, no solo como alternativas a los números de línea.

Las líneas de la cuadrícula se numeran comenzando desde 1 al inicio de la cuadrícula. También puedes usar números negativos para contar desde el final (por ejemplo, -1 se refiere a la última línea).

Ejemplo de la propiedad grid-column:

Ejemplo de la propiedad CSS grid-column con números de línea

html

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

Try it Yourself »

Resultado

CSS grid-column Property

Ejemplo de la propiedad grid-column especificada como 1 / 3:

Ejemplo de la propiedad CSS grid-column

html

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

Try it Yourself »

Valores

Valor	Descripción
`<line-number>`	Especifica el número de línea para el borde de inicio o final.
`<line-name>`	Especifica el nombre de línea para el borde de inicio o final.
`span <number>`	Especifica el número de columnas que debe abarcar el elemento.
`initial`	Establece la propiedad en su valor predeterminado.
`inherit`	Hereda la propiedad de su elemento padre.

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 la cuadrícula y el espacio que abarca dentro de las filas 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 espacio o nada.

Propiedad grid-column de CSS ​

Sintaxis ​

Ejemplo de la propiedad grid-column: ​

Resultado ​

Ejemplo de la propiedad grid-column especificada como 1 / 3: ​

Valores ​