En la segunda lección del curso de CSS Grid vamos a empezar las bases del layout y por qué es tan importante entender cómo se construye una web para nuestros proyectos.
Antes de meternos de lleno en el código CSS es importante que entendamos qué es una web responsive y por qué debemos diseñar y desarrollar nuestras hojas de estilo CSS con una clara predisposición de elementos adaptados al soporte en el que se van a visualizar.
El viewport es una de las cosas más extendidas hoy en día y que es necesario conocer y entender para desarrollar una web moderna con CSS. ¡Vamos a verlo!
¡Así de fácil es crear columnas! Teniendo la base de cómo funciona el layout y se adapta a los diferentes soportes y además cómo crear columnas ya podemos ir al siguiente nivel con más contexto.
A través de la documentación de W3Schools hemos visto un ejemplo real de cómo se crea una grilla de manera más tradicional sin Flexbox ni CSS Grid para entender que este tipo de bloques son posibles de crear con CSS básico.
Dado que ahora tenemos un contexto mayor de la importancia del responsive y para qué sirve, podemos tener una visión más concreta de lo que supone CSS Grid como herramienta para desarrollar nuestros proyectos.
Como vemos, es muy útil trabajar con la propiedad columns y algunas de sus funcionalidades para que podamos entender cómo crear columnas sin grid, comparando con el ejemplo inicial de la lección en el que simulan las columnas de la grilla.
Es importante practicar de menos a más a lo largo del curso construyendo grillas, columnas y elementos en la pantalla de manera que podamos entender cómo podemos trabajar nuestros layouts y aplicar todos estos conocimientos.
Os animo a que investiguéis por vuestra parte la lista de propiedades de columns en la documentación de CSS de W3Schools. Podéis aplicar reglas con column-rule y trabajar con más propiedades que os permitirán gestionar mejor el css aplicado a vuestro layout de columnas.
¡Por cierto! Que no se os olvide que si tenéis cualquier duda o comentario podéis escribirnos a través del panel de soporte en boluda.com :)
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