Propiedad CSS grid-column-start
Aprende cómo la propiedad CSS grid-column-start ancla un elemento de cuadrícula a una línea de columna. Incluye sintaxis, auto, span, líneas con nombre y ejemplos.
La propiedad CSS grid-column-start establece la línea de columna donde comienza un elemento de cuadrícula — su borde de inicio en línea. Junto con grid-column-end, determina cuántas columnas ocupa el elemento y dónde se ubica. Ambas se escriben habitualmente con la propiedad abreviada grid-column: grid-column: <start> / <end>.
Usa grid-column-start cuando necesites una colocación explícita dentro de un diseño CSS Grid — por ejemplo, para hacer que un banner principal abarque desde la segunda columna en adelante, o para empujar una barra lateral a una pista específica independientemente del orden en el código fuente.
Cómo se numeran las líneas de cuadrícula: en una cuadrícula con cuatro columnas hay cinco líneas verticales, numeradas del 1 al 5 desde el borde de inicio en línea. También puedes usar números negativos: -1 hace referencia a la última línea, -2 a la penúltima, y así sucesivamente.
| Valor inicial | auto |
| Se aplica a | Elementos de cuadrícula |
| Heredable | No |
| Animable | Sí — la línea de inicio es animable |
| Versión | CSS Grid Layout Module Level 1 |
| Sintaxis DOM | object.style.gridColumnStart = "2" |
Sintaxis
grid-column-start: auto | <integer> | <name> | span <n> | initial | inherit;auto— el navegador coloca el elemento usando la colocación automática (valor predeterminado).<integer>— un número de línea de cuadrícula, p. ej.2o-1.<name>— una línea con nombre definida engrid-template-columns.span <n>— el elemento abarcanpistas de columna desde donde sea que se coloque.
Valores
| Valor | Descripción |
|---|---|
auto | Predeterminado. El elemento sigue la colocación automática normal y ocupa una columna. |
<integer> | Un número de línea positivo o negativo. Los valores negativos cuentan desde el final de la cuadrícula explícita. |
<name> | El nombre de una línea de cuadrícula, p. ej. main-start cuando se define mediante [main-start] en grid-template-columns. |
span <n> | Abarca n pistas de columna. A diferencia de un número de línea, esto no fija la posición de inicio del elemento. |
initial | Restablece la propiedad a su valor inicial (auto). |
inherit | Hereda el valor del elemento padre. |
Ejemplos
Colocar un elemento en una línea específica
Establecer grid-column-start: 2 coloca el primer elemento de modo que su borde izquierdo se alinee con la segunda línea de cuadrícula vertical, empujándolo a la segunda ranura 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: #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: 6 — implicit column created</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>Dado que la plantilla solo define cuatro columnas (líneas 1–5), pedirle a box1 que comience en la línea 6 obliga al navegador a crear columnas implícitas (líneas 5 y 6) para acomodarla. Este es un error común — verifica siempre que tu número de línea permanezca dentro de la cuadrícula explícita, a menos que desees pistas implícitas intencionalmente.
![Propiedad grid-column-start](/uploads/media/default/0001/03/52b22b9f4f2b6f8f1d65a6fb309fe3ee15e77b77.png "Propiedad grid-column-start" =420x)
Abarcar columnas con span
Usar span 2 indica al elemento que ocupe dos pistas de columna desde donde la colocación automática lo sitúe. A diferencia de un número de línea, span es relativo — la posición exacta de inicio del elemento la sigue determinando la colocación automática.
<!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: span 2</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>Esta es la forma más legible cuando te importa el ancho en columnas de un elemento pero no su posición exacta. Para fijar la posición y controlar el ancho al mismo tiempo, combina grid-column-start con grid-column-end, o usa la propiedad abreviada grid-column.
Colocación automática predeterminada
Cuando se establece en auto (el valor predeterminado), el elemento se ubica en la siguiente celda disponible según determina el algoritmo de grid auto-flow. Los elementos llenan la cuadrícula fila por fila.
<!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: auto (default)</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>Anclar a la columna 4
grid-column-start: 4 ancla el borde izquierdo del primer elemento a la cuarta línea vertical. Los elementos restantes llenan las columnas anteriores mediante colocación automática.
<!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>
<h2>grid-column-start: 4</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>9</div>
</div>
</body>
</html>Patrones comunes y errores frecuentes
Combinar inicio y fin para una colocación exacta
Para tener control total sobre la colocación, combina grid-column-start con grid-column-end. La propiedad abreviada grid-column es la forma más concisa de hacerlo:
/* Place item from column line 2 to column line 4 (spans 2 tracks) */
.item {
grid-column: 2 / 4;
/* equivalent to: */
/* grid-column-start: 2; */
/* grid-column-end: 4; */
}Usar números de línea negativos
Los enteros negativos cuentan desde el final de la cuadrícula explícita. -1 es la última línea de la cuadrícula explícita, lo que facilita extender un elemento hasta el borde opuesto sin necesidad de saber cuántas columnas hay:
/* Full-width banner across all explicit columns */
.banner {
grid-column-start: 1;
grid-column-end: -1;
}Esto es equivalente a grid-column: 1 / -1. Ten en cuenta que los números negativos solo hacen referencia a líneas de la cuadrícula explícita (definida por grid-template-columns); no alcanzan las columnas implícitas creadas por desbordamiento.
Líneas con nombre
Cuando defines líneas con nombre en grid-template-columns, puedes referenciarlas por nombre en lugar de por número. Esto hace que los diseños sean autodocumentados:
.container {
display: grid;
grid-template-columns: [sidebar-start] 200px [sidebar-end content-start] 1fr [content-end];
}
.sidebar {
grid-column-start: sidebar-start; /* or just: grid-column-start: 1 */
}
.main {
grid-column-start: content-start; /* or: grid-column-start: 2 */
}Las líneas con nombre son especialmente útiles en componentes de diseño grandes o reutilizables donde los números de columna pueden cambiar.
La interacción entre el elemento y la colocación automática
Cuando grid-column-start se establece en una línea explícita, la colocación automática de los elementos posteriores se reanuda desde la siguiente celda disponible después del elemento colocado explícitamente. Esto puede dejar huecos si no hay elementos que los llenen — usa grid-auto-flow: dense para rellenar los huecos automáticamente.
Propiedades relacionadas
grid-column-end— establece la línea donde termina el elemento.grid-column— propiedad abreviada paragrid-column-startygrid-column-end.grid-row-start— el equivalente en el eje de fila de esta propiedad.grid-row— propiedad abreviada paragrid-row-startygrid-row-end.grid-area— propiedad abreviada que establece el inicio y fin de fila y columna a la vez.grid-template-columns— define las columnas y las líneas con nombre que referencia esta propiedad.grid-auto-flow— controla cómo los elementos de colocación automática llenan la cuadrícula, afectando el comportamiento de los huecos.