En la séptima lección del curso de CSS Grid vamos a descubrir y utilizar la función grid-area y grid-template-areas en nuestro grid para construir áreas.
En esta lección vamos a continuar nuestro layout de 9 bloques vacíos para practicar con nuevas propiedades, en esta ocasión vamos a crear áreas específicas en las que introducir automáticamente nuestros bloques numerados.
Para terminar la lección vamos a coger el layout básico que tenemos construido en CSS Grid y lo vamos a evolucionar para especificar todo el contenido con áreas y darle un toque profesional. ¡Empecemos!
¡Así de fácil! Ya sabéis cómo usar grid-area en vuestro CSS y dimensionar a la hora de construir vuestras grillas en CSS Grid. La función grid-template-areas lo que nos permite es especificar en nuestro grid cómo deben distribuirse los elementos y qué nombres van a tener esas áreas.
Esto significa que podríamos construir una web completa especificando diferentes áreas donde el contenido se rellene dinámicamente: header, content y footer. Importante recordar que CSS Grid va a ajustar siempre el contenido que nosotros le digamos que tiene que coger al hueco que en ese momento tenga disponible. Además estas áreas nos van a servir para utilizar las propiedades de grid-row, y grid-column dado que funcionan igual que los alias que vimos en lecciones anteriores.
Os animo a que investiguéis por vuestra parte y practiquéis con el sistema de áreas que hemos visto en esta lección pero en vez de aplicarlo a un ejemplo de bloques vacíos o al mismo layout básico como en la lección, que lo apliquéis a una web real que os permita pensar bien cómo utilizarlo mezclado con los repeats y demás propiedades que hemos ido viendo a lo largo del curso con CSS Grid. Es todo un reto.
Recordad que si tenéis cualquier duda o pregunta, podéis mandarla a través del formulario de soporte de la intranet de suscriptor. ¡Nos vemos en la siguiente lección! :)
Todos los capítulos de este curso:
- Curso de CSS Grid #1. ¿Qué es CSS Grid?
- Curso de CSS Grid #2. Empezamos las bases del layout
- Curso de CSS Grid #3. Trabajamos en una dimensión con Flexbox
- Curso de CSS Grid #4. Trabajamos en dos dimensiones con CSS Grid
- Curso de CSS Grid #5. Nombres y posicionamiento en línea
- Curso de CSS Grid #6. Repeat en CSS Grid
- Curso de CSS Grid #7. Grid Template Areas
- Curso de CSS Grid #8. Alineamiento de elementos del grid
- Curso de CSS Grid #9. Grid Auto-fit y Auto-fill
- Curso de CSS Grid #10. Montamos nuestra web con CSS Grid