Número y ancho de columnas en CSS Grid

Comenzaremos nuestra introducción al trabajo con grid asignando el número y el ancho de las columnas a lo largo de las cuales se ubicarán los elementos secundarios. Para este propósito utilizaremos la propiedad grid-template-columns, que se especifica en el elemento padre y define el número y ancho de las columnas que ocuparán los elementos hijos en el grid. En el valor de la propiedad indicamos el ancho de las columnas en píxeles.

Ejemplo

Primero creemos un elemento padre y hagamos que sea un contenedor de grid. Supongamos que tenemos un div que contiene cuatro elementos secundarios. Establezcamos para él en la propiedad display el valor grid, y en la propiedad grid-template-columns escribamos el ancho para dos columnas:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 200px 400px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Ejemplo

Ahora creemos una tabla con cuatro columnas de diferentes tamaños:

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

#parent {
	display: grid;
	grid-template-columns: 50px 100px 200px 250px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Tareas prácticas

Supongamos que tienes un div con nueve elementos secundarios. Convierte el elemento padre en un contenedor de grid.

Ubica los elementos secundarios en dos columnas de ancho 200px.

Ubica los elementos secundarios en tres columnas de ancho 150px.

Ubica los elementos secundarios en tres columnas: la primera de ancho 100px, la segunda de 150px, y la tercera de 200px.