Propiedad grid-template

La propiedad grid-template establece el número y el ancho de las filas y columnas que ocupará un elemento en el grid o cuadrícula y es una forma abreviada de las propiedades grid-template-rows y grid-template-columns. Las filas y columnas en las que se ubicará el elemento se indican mediante una barra. La propiedad grid-template se establece en el elemento padre y define la ubicación de los elementos hijos. En el valor de la propiedad indicamos el ancho de las filas o columnas en cualquier unidad de tamaños.

Al especificar valores en píxeles en las propiedades, los tamaños de los elementos corresponderán exactamente a ellos. Si usamos la palabra auto, las columnas y filas ocupará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 divide el espacio en el número indicado de fracciones sin estar vinculado a un tamaño exacto en píxeles.

Sintaxis

selector {
	grid-template: ancho y número de filas / ancho y número de columnas;
}

Ejemplo

Vamos a crear una tabla usando la propiedad grid-template:

<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: 1fr 1fr 1fr / 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Ejemplo

Ahora vamos a establecer el mismo ancho para la segunda y tercera fila, y un ancho diferente para cada columna:

<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: 60px 1fr 60px / 20% 1fr 15%;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Ejemplo

Ahora en la tabla del ejemplo anterior hagamos que la fila superior tenga un ancho de dos fracciones, y la primera columna - 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: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Véase también

la propiedad grid,
que establece la forma abreviada de las propiedades de columnas y filas
la propiedad grid-template-rows,
que establece el número y ancho de las filas en el grid
la propiedad grid-template-columns,
que establece el número y ancho de las columnas en el grid