Propiedad grid-template-columns
La propiedad grid-template-columns establece
el número y el ancho de las columnas que
ocupará un elemento en el grid o cuadrícula.
La propiedad se especifica en el elemento padre
y determina el ancho de las columnas de los elementos hijos.
En el valor de la propiedad indicamos el ancho de las columnas
en cualquier unidad
de tamaños.
Al especificar valores en píxeles en las propiedades,
los tamaños de las columnas corresponderán exactamente a ellos.
Si usamos la palabra auto, las columnas
llenarán todo el espacio disponible. El uso
de la unidad fr (fracción) significa
que todo el espacio se dividirá
en partes iguales. La ventaja de
fr es su adaptabilidad a
diferentes contenedores o resoluciones de pantalla,
ya que fr simplemente los divide en el número
indicado de fracciones sin vinculación a un tamaño exacto en píxeles.
Sintaxis
selector {
grid-template-columns: ancho de columna;
}
Ejemplo
Vamos a establecer el ancho de las columnas para nuestros elementos en el grid:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 50px 100px 200px 50px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ejemplo
Vamos a dar a la primera y tercera columna un ancho fijo en píxeles, y que la segunda columna llene automáticamente el espacio disponible:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px auto 150px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ejemplo
Ahora, usando la propiedad
grid-template-columns,
hagamos que la primera y segunda
columna ocupen una parte del contenedor,
y la tercera columna - tres partes:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ejemplo
Los valores especificados en unidades fr
pueden ser fraccionarios. Vamos a
modificar el ejemplo anterior, especificando
para la segunda y tercera columna un ancho
en números fraccionarios:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ejemplo
Vamos a usar en la propiedad grid-template-columns
la función repeat(),
que indicará al contenedor que todas
las tres columnas deben tener el mismo ancho:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ejemplo
Ahora modifiquemos el ejemplo anterior para que a las tres columnas iguales se añada una cuarta, que ocupará dos fracciones del contenedor:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ejemplo
Vamos a dar a las dos primeras columnas un ancho de una fracción del contenedor, y a las dos últimas columnas - de dos fracciones:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ejemplo
Ahora vamos a establecer el ancho de las columnas
combinando valores, especificados mediante
la función repeat() y unidades libres fr:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ejemplo
También en la función repeat() se puede indicar
el valor auto-fill, que llenará
nuestro contenedor con columnas iguales del ancho que necesitemos:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ejemplo
Es muy conveniente junto con auto-fill
especificar la función minmax,
que establece el rango de ancho de las columnas
desde un valor mínimo hasta un valor máximo.
Si el ancho del contenedor no cabe todas
las columnas, algunas de ellas se moverán
a una nueva línea, mientras que las columnas en la línea
se distribuirán uniformemente en ella. Modifiquemos
el ejemplo anterior, especificando en él la función minmax.
Para ver diferentes variantes de disposición de columnas
cambia el ancho de la página de tu navegador:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ejemplo
Ahora vamos a especificar la propiedad auto-fit,
cuya diferencia con auto-fill radica en que
ajusta la cantidad de columnas al
ancho disponible del contenedor, expandiendo o
comprimiéndolas:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ejemplo
También junto con fr se pueden
usar valores en %, que también determinan
qué parte del contenedor ocupará la columna.
En este caso, primero se calculará el tamaño
de la columna en %, y el espacio libre restante
se dividirá en fracciones:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ejemplo
Vamos a usar juntas las propiedades
grid-template-columns y
grid-template-rows:
<div id="parent">
<div>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>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ejemplo
Vamos a usar las propiedades
grid-template-columns y
grid-template-rows
para crear una tabla de nueve celdas, ubicadas
en tres filas. Donde la segunda y tercera fila tendrán el mismo ancho,
y cada columna - un ancho diferente:
<div id="parent">
<div>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>
#parent {
display: grid;
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 20% 1fr 15%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ejemplo
Y ahora en la tabla del ejemplo anterior hagamos que la fila superior tenga un ancho de dos fracciones, y la primera columna - de media fracción:
<div id="parent">
<div>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>
#parent {
display: grid;
grid-template-rows: 2fr 1fr 1fr;
grid-template-columns: 0.5fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ver también
-
la propiedad
grid-template-rows,
que establece el número y el ancho de las filas en el grid -
la propiedad
grid-auto-columns,
que establece el número y el ancho de las columnas en el grid implícito
