Bienvenido y bienvenida a este curso de CSS Grid Básico. Pondremos en práctica algunos conceptos que ya hemos aprendido y conoceremos otros nuevos para posicionar elementos dentro de contenedores de la manera en que deseemos. Primero, entendamos lo que es CSS Grid.
Qué es CSS Grid
Css grid es una especificación de CSS para realizar layouts más dinámicos. Anteriormente sólo se podía usar tablas para realizar lo que ahora podemos hacer con Grid de manera mucho más sencilla. Nos permite dividir una página en áreas o regiones principales, por definir la relación en términos de tamaño, posición y capas construidas a partir de HTML
CSS Grid introdujo un sistema de grilla que es una cuadrícula con columnas (columns) y filas (rows), con ellas podemos ubicar elementos de manera más fácil.
Podemos crear, por ejemplo, un layout simple con el header, main y footer ya que cada bloque conforma un elemento de la grilla que se puede ubicar. Como los layouts pueden cambiar mucho, Grid nos ayuda a posicionar y reposicionar los elementos cuantas veces necesitemos.
Por fin disponible, odio cuando busco un curso en especifico y me sale "disponible tal fecha" jajaja pero lo bueno es que ya esta aquí y vamos a consolidad las bases de CSS grid :)
Yo me emociono cuando veo que ya casi sale el curso que quiero. Lo malo es que me pongo a hacer otro curso y de ahí me voy a otro y termino dejando el que quería por un par de semanas. Y justo me paso así con este curso jaja.
Pero por fin ya estoy por acá tomándolo.
CSS Grid layout contiene funciones de diseño dirigidas a los desarrolladores de aplicaciones web. El CSS grid se puede utilizar para lograr muchos diseños diferentes. También se destaca por permitir dividir una página en áreas o regiones principales, por definir la relación en términos de tamaño, posición y capas entre partes de un control construido a partir de primitivas HTML.
Al igual que las tablas, el grid layout permite a un autor alinear elementos en columnas y filas. Sin embargo, con CSS grid son posibles muchos más diseños y de forma más sencilla que con las tablas. Por ejemplo, los elementos secundarios de un contenedor de cuadrícula podrían posicionarse para que se solapen y se superpongan, de forma similar a los elementos posicionados en CSS.
En tus apuntes pusiste (en la clase 1) que el CSS Grid nació por la necesidad de hacer layouts mucho más básicos, en realidad lo que dice la instructora es que nació para hacer layouts mucho más dinámicos.
Ya manejo del back Node.js, con Express y React en el front, sé consumir apis res y crear mis propias bases de datos con postgreSQL o MongoDb, pero sin CSS se siguen viendo como si estuvieran hechas en los 90as. Creo que por aquí van los tiros
Justo ayer hice una calculadora y utilicé flexbox, de verdad me costó demasiaaaaado colocar un par de botones debido a la posición que yo necesitaba y porque obviamente tenía que ser responsive, y cuando vi la rejilla en el video supe que en ese momento, grid era lo que necesitaba, me hubiera facilitado tanto la vida empezar este curso dos días antes jaja
Hey! Este curso es muy cool así que te dejo un pequeño resumen hecho en canva. Además, te dejo los apuntes que fui tomando de mis compañeros y mis propias notas, todo en un solo lugar
Importante: Estos apuntes te servirán para el Curso Profesional de CSS Grid Layout 😄
📌 Ayúdame a mejor estos apuntes, déjame tus comentarios y aportes aquí debajo. Bye!!
