CSS Grid Layout
Craig Buckler, Ilya Bodrov-Krukowski, Giulio Mainardi
- Editorial
- Sitepoint
- Año
- 2018
- Páginas
- ~116
- Nivel
- Intermedio
De qué trata
Antología práctica publicada por SitePoint en 2018 con el título completo «CSS Grid Layout: 5 Practical Projects». Reúne cinco tutoriales de distintos autores: Ilya Bodrov-Krukowski, Giulio Mainardi, Ahmed Bouchefra, Diogo Souza y Craig Buckler. Salió cuando CSS Grid acababa de llegar de forma estable a los principales navegadores, y está pensada para desarrolladores con algo de experiencia en CSS que quieren aprender Grid aplicándolo a casos concretos y no a partir de la especificación.
Cada capítulo enseña las piezas centrales de Grid sobre un ejemplo real: definir filas y columnas con grid-template-columns y grid-template-rows, usar la unidad fr, repeat(), minmax() y auto-fit/auto-fill para rejillas adaptables, nombrar áreas con grid-template-areas, colocar elementos por líneas y ajustar los huecos con gap. También muestra cómo combinar Grid con media queries para lograr diseños responsivos, cómo aplicar la mejora progresiva con @supports para pasar de floats a Flexbox y de ahí a Grid sin dejar fuera a los navegadores antiguos, y cómo usar Grid para alinear formularios.
Es un libro corto y directo que se lee como una serie de artículos de SitePoint. Su ventaja es que cada proyecto se puede seguir por separado y deja una técnica concreta reutilizable. Por el formato de antología, la profundidad y el estilo cambian de un capítulo a otro y no hay un hilo teórico común, y es anterior a subgrid y a las mejoras de Grid más recientes. Conviene complementarlo con una referencia más sistemática.
- CSS Grid
- grid-template-areas
- Unidad fr
- minmax y auto-fit
- Diseño responsivo
- Mejora progresiva
- Floats
- Flexbox
- @supports
- Formularios
- Layouts de tarjetas
¿Cómo enseña?
Con proyectos
- ✗ Sin ejercicios
- ✓ Incluye proyectos
Proyectos
Rediseño de un sitio con CSS Grid Layout
Ilya Bodrov-Krukowski toma un sitio existente y reconstruye su maquetación con CSS Grid, sustituyendo las técnicas antiguas por filas, columnas y áreas de rejilla.
Rediseño de un layout de tarjetas al estilo Tumblr
Giulio Mainardi rehace con Grid una interfaz basada en tarjetas, como la de Tumblr, para organizar publicaciones de distintos tamaños de forma adaptable.
Layout moderno y responsivo con CSS Grid
Ahmed Bouchefra construye una maquetación de página que se adapta a cualquier pantalla combinando Grid con media queries y unidades flexibles.
Layouts con mejora progresiva: de floats a Flexbox y Grid
Diogo Souza muestra cómo construir un mismo diseño por capas: floats como base, Flexbox y finalmente Grid, detectando el soporte del navegador con @supports.
Formularios mejores con CSS Grid
Craig Buckler usa Grid para alinear etiquetas, campos y botones de formularios responsivos sin necesidad de marcado adicional.
