Aprende CSS Grid en 4 minutos

En esta ocasión me gustaría hablar de la forma más sencilla y actual para posicionar elementos. Hablamos de otro sistema de maquetación moderno como Flex (que en ningún caso lo sustituye, sino que puede usarse de forma paralela). Su proposito es realizar un moderno sistema de Grids con CSS. Una manera de estructurar no por filas flexibles, sino por un tablero con sus filas y columnas fijas.

Primer vistazo.

Antes de entrar en materia veamos como funciona. Imaginemos un tablero de ajedrez.

Podría marcar como quiero colocar la estructura de mis divs.

Ahora lo implemento en HTML/CSS partiendo de Grid.

<html>
	<head>
		<!-- CSS -->
		<style>
			#tablero {
				display: grid;
				grid-template-columns: 300px 500px;
				grid-template-rows: 200px 100px 500px;
				width: 800px;
				height: 800px;
			}
			#azul {
				background-color: blue;
				grid-column: 2 / 3;
				grid-row: 2 / 3;
			}
			#amarillo {
				background-color: yellow;
				grid-column: 1 / 2;
				grid-row: 1 / 4;
			}
			#rojo {
				background-color: red;
				grid-column: 2 / 3;
				grid-row: 1 / 2;
			}
			#verde {
				background-color: green;
				grid-column: 2 / 3;
				grid-row: 3 / 4;
			}
		</style>
	</head>
	<body>
		<!-- HTML -->
		<div id="tablero">
			<div id="azul"></div>
			<div id="amarillo"></div>
			<div id="rojo"></div>
			<div id="verde"></div>
		</div>
	</body>
</html>

El resultado sería prácticamente igual:

Más adelante explicaré de forma sencilla como llegar a cada elemento. Ahora solo quiero que veáis que con muy pocas líneas de CSS, y sin alterar la estructura del HTML, hemos conseguido estructurar a nuestro gusto y sin limitaciones aparentes.

Veamos poco a poco como funciona.

Conceptos básicos

Para empezar debemos tener claro que existen dos partes bien diferenciadas: un padre y sus hijos. El padre será el tablero o la etiqueta que envuelva todo. Llevará el estilo display: grid. Y los hijos son los contenedores o elementos que queremos posicionar dentro de nuestro tablero. Si has trabajado con flex notarás que el funcionamiento es clónico.

Un ejemplo.

<html>
	<head>
		<!-- CSS -->
		<style>
			#tablero {
				display: grid;
				width: 800px;
				height: 800px;
			}
			#azul {
				background-color: blue;
			}
			#amarillo {
				background-color: yellow;
			}
			#rojo {
				background-color: red;
			}
			#verde {
				background-color: green;
			}
		</style>
	</head>
	<body>
		<!-- HTML -->
		<div id="tablero">
			<div id="azul"></div>
			<div id="amarillo"></div>
			<div id="rojo"></div>
			<div id="verde"></div>
		</div>
	</body>
</html>

De acuerdo, tal vez te sientes decepcionado. ¡Paciencia! Aún tenemos que indicar a cada hijo donde debe colocarse :)

El padre va a indicar cual va a ser el número de filas y columnas que va a tener nuestro tablero. Incluso va a decir cuanto va a medir cada una.

Si quisiera una estructura de 2x2. O lo que es lo mismo, si partimos de que nuestro tablero mide 800px por 800px: 2 columnas de 400px y 2 filas de 400px.

<html>
	<head>
		<!-- CSS -->
		<style>
			#tablero {
				display: grid;
				// Columnas
				grid-template-columns: 400px 400px;
				// Filas
				grid-template-rows: 400px 400px;
				width: 800px;
				height: 800px;
			}
			#azul {
				background-color: blue;
			}
			#amarillo {
				background-color: yellow;
			}
			#rojo {
				background-color: red;
			}
			#verde {
				background-color: green;
			}
		</style>
	</head>
	<body>
		<!-- HTML -->
		<div id="tablero">
			<div id="azul"></div>
			<div id="amarillo"></div>
			<div id="rojo"></div>
			<div id="verde"></div>
		</div>
	</body>
</html>

Sencillo, ¿no?

Por supuesto puedo cambiar los tamaños.

<html>
	<head>
		<!-- CSS -->
		<style>
			#tablero {
				display: grid;
				// Columnas
				grid-template-columns: 100px 700px;
				// Filas
				grid-template-rows: 500px 300px;
				width: 800px;
				height: 800px;
			}
			#azul {
				background-color: blue;
			}
			#amarillo {
				background-color: yellow;
			}
			#rojo {
				background-color: red;
			}
			#verde {
				background-color: green;
			}
		</style>
	</head>
	<body>
		<!-- HTML -->
		<div id="tablero">
			<div id="azul"></div>
			<div id="amarillo"></div>
			<div id="rojo"></div>
			<div id="verde"></div>
		</div>
	</body>
</html>

Posicionando los hijos

En esta ocasión vamos a colocar cada hijo donde nosotros queramos. Partimos de un tablero de 3x3.

Nuestro objetivo final será colocar 5 elementos con esta estructura.

Preparamos nuestro código.

<html>
	<head>
		<!-- CSS -->
		<style>
			#tablero {
				display: grid;
				grid-template-columns: 300px 300px 300px;
				grid-template-rows: 300px 300px 300px;
				width: 900px;
				height: 900px;
			}
			#azul {
				background-color: blue;
			}
			#amarillo {
				background-color: yellow;
			}
			#rojo {
				background-color: red;
			}
			#verde {
				background-color: green;
			}
			#rosa {
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<!-- HTML -->
		<div id="tablero">
			<div id="azul"></div>
			<div id="amarillo"></div>
			<div id="rojo"></div>
			<div id="verde"></div>
			<div id="rosa"></div>
		</div>
	</body>
</html>

Cada hijo debe ser posicionado en un inicio y un final de columna y fila. Nuestro tablero tiene las siguientes líneas.

Empezamos con el hijo amarillo. Ocupa el área entre la columna 1 y la columna 2.

#amarillo {
	background-color: yellow;
	grid-column-start: 1;
	grid-column-end: 2;
}

Y de la fila 1 a la fila 4.

#amarillo {
	background-color: yellow;
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 4;
}

Una versión resumida de lo anterior.

#amarillo {
	background-color: yellow;
	grid-column: 1 / 2;
	grid-row: 1 / 4;
}

Aplicando la misma técnica se quedaría el ejemplo de la siguiente forma.

<html>
	<head>
		<!-- CSS -->
		<style>
			#tablero {
				display: grid;
				grid-template-columns: 300px 300px 300px;
				grid-template-rows: 300px 300px 300px;
				width: 900px;
				height: 900px;
			}
			#azul {
				background-color: blue;
				grid-column: 2 / 4;
				grid-row: 3 / 4;
			}
			#amarillo {
				background-color: yellow;
				grid-column: 1 / 2;
				grid-row: 1 / 4;
			}
			#rojo {
				background-color: red;
				grid-column: 2 / 3;
				grid-row: 1 / 3;
			}
			#verde {
				background-color: green;
				grid-column: 3 / 4;
				grid-row: 1 / 2;
			}
			#rosa {
				background-color: pink;
				grid-column: 3 / 4;
				grid-row: 2 / 3;
			}
		</style>
	</head>
	<body>
		<!-- HTML -->
		<div id="tablero">
			<div id="azul"></div>
			<div id="amarillo"></div>
			<div id="rojo"></div>
			<div id="verde"></div>
			<div id="rosa"></div>
		</div>
	</body>
</html>

Espero que a partir de ahora dispongáis de una herramienta nueva para conseguir vuestras maquetaciones más endiabladas. Poned un comentario si el artículo os ha gustado o irracionalmente lo odiais.

Versión escritorio