Sitepoint- Designing with CSS Grid Layout

Antología breve publicada por SitePoint en julio de 2017 que reúne cinco tutoriales de su canal de HTML y CSS, escritos por Ahmad Ajmi, Nitish Kumar y Adrian Roworth, para introducir el módulo CSS Grid Layout justo cuando empezaba a tener soporte estable en los navegadores principales. Está dirigido a desarrolladores front-end y diseñadores web que ya tienen experiencia con CSS y quieren entender el nuevo sistema de maquetación bidimensional.

Los capítulos avanzan de forma progresiva: una introducción al módulo y su terminología (contenedor, ítems, líneas, pistas, celdas y áreas); las distintas formas de colocar elementos en la cuadrícula (por número o nombre de línea, con span y con grid-template-areas); el ordenamiento y la alineación de ítems con propiedades como justify-items, align-items y order; y el algoritmo de auto-placement, que explica cómo el navegador sitúa los elementos sin posición explícita y cómo controlarlo con grid-auto-flow y dense. El último capítulo aplica lo aprendido a un caso práctico.

El proyecto final es un crucigrama hecho solo con CSS, un ejercicio vistoso que muestra la precisión de Grid para colocar elementos. Como introducción concisa sigue siendo útil, ya que la sintaxis básica de Grid apenas ha cambiado. Al ser de 2017, no cubre subgrid ni las container queries, y algunas notas sobre el soporte de los navegadores y los prefijos están desactualizadas. Para proyectos más completos, SitePoint publicó después «CSS Grid Layout: 5 Practical Projects».