Propiedad CSS grid-column-start

La propiedad grid-column-start especifica la posición de inicio del elemento dentro de la columna añadiendo una línea, un span o nada. En otras palabras, define la posición inline-start de su área de cuadrícula.

Valor inicial	auto
Se aplica a	Elementos de la cuadrícula.
Heredable	No.
Animable	Sí. El punto de inicio es animable.
Versión	CSS Grid Layout Module Level 1
Sintaxis DOM	object.style.gridColumnStart = "6";

Sintaxis

Sintaxis CSS de grid-column-start

css

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

Ejemplo de la propiedad grid-column-start:

Ejemplo de código CSS de grid-column-start

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: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box1 {
        grid-column-start: 6;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column-start 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>
  </body>
</html>

Try it Yourself »

Resultado

Propiedad grid-column-start

Aquí, hemos especificado desde qué columna debe comenzar la visualización del elemento. Nota: Dado que la plantilla de la cuadrícula solo define 4 columnas, las líneas 5 y 6 se crean implícitamente para acomodar el elemento. En el siguiente ejemplo, hemos especificado el número de columnas que abarcará el elemento.

Ejemplo de la propiedad grid-column-start especificada como "span 2":

Otro ejemplo de código CSS de grid-column-start

html

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

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

Ejemplo de la propiedad grid-column-start con el 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;
        gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box1 {
        grid-column-start: auto;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column-start 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 class="box8">8</div>
      <div class="box9">9</div>
    </div>
  </body>
</html>

Try it Yourself »

Ejemplo de la propiedad grid-column-start con el valor "column-line":

Ejemplo de la propiedad grid-column-start con el valor "column-line":

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 12px;
        background-color: red;
        padding: 15px;
      }
      .grid-container>div {
        background-color: #dcdcdc;
        text-align: center;
        padding: 20px 0;
        font-size: 35px;
        color: white;
      }
      .box1 {
        grid-column-start: 4;
      }
    </style>
  </head>
  <body>
    <h1> Grid-column-start Property </h1>
    <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>9</div>
    </div>
  </body>
</html>

Try it Yourself »

Valores

Valor	Descripción	Probarlo
auto	Solo se abarcará una columna. Este es el valor predeterminado de esta propiedad.	Probarlo »
span n	Especifica el número de columnas que abarcará el elemento.	Probarlo »
column-line	Especifica la línea de la cuadrícula donde debe comenzar el elemento.	Probarlo »

Práctica

¿Qué hace la propiedad CSS grid-column-start?

Indica al navegador dónde comenzar la columna en un diseño de cuadrícula.Especifica la dirección de correo electrónico del remitente en un formulario de contacto.Define la codificación de caracteres para el documento HTML.Determina el ancho de un borde en un diseño de cuadrícula.Determina dónde se coloca un elemento en un diseño de cuadrícula.

Propiedad CSS grid-column-start ​

Sintaxis ​

Ejemplo de la propiedad grid-column-start: ​

Resultado ​

Ejemplo de la propiedad grid-column-start especificada como "span 2": ​

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

Ejemplo de la propiedad grid-column-start con el valor "column-line": ​

Valores ​

Práctica ​

Propiedad CSS grid-column-start

Sintaxis

Ejemplo de la propiedad grid-column-start:

Resultado

Ejemplo de la propiedad grid-column-start especificada como "span 2":

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

Ejemplo de la propiedad grid-column-start con el valor "column-line":

Valores

Práctica