Emocionado con este curso. Vamos que si podemos. Crearemos los sitios web del futuro. 💪
Introducción a Grid
¿Qué es CSS Grid Layout?
Conceptos para comenzar
Propiedades de Grid
Propiedades del contenedor
Propiedades de alineación
Propiedades de ubicación
Power ups de Grid
Funciones especiales
Keywords especiales
Proyecto
Proyecto
Hagamos nuestra primera sección
Creando la grilla con área
Armando el listado
Bonus
¿Cómo hacer nuestro proyecto responsivo?
Próximos pasos
Más cursos de CSS Grid
¿Qué es CSS Grid Layout?
1/13Recursos
Transcripción
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.
Te recomiendo echar un vistazo a la guía completa de CSS Grid.
Contribución creada por: José Miguel Ventimilla (Platzi Contributor).
Aportes 81
Preguntas 3
Ordenar por:
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 😃
La guía de referencia más pedagógica que he visto:
CSS Tricks: GSS Grid Layout
Apuntes:
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.
Hola. Les comparto mis notas del curso.
https://plaid-silver-f03.notion.site/Curso-de-CSS-Grid-B-sico-9510f9f38dbc48709b504d74aec48ef3
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
El primer curso que tomo en el Platzi Day. Sin duda alguna CSS tiene tantas características. Es muy importante para nuestra ruta de formación.
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
y yo sufriendo con position 😣
Hola! Les dejo el link con lo que podrán logran al terminar este curso, incluyendo el proyecto final 😁
Todos los desafíos del curso
Repositorio del curso
Proyecto Final
Repositorio del proyecto final
aquí por el reto del portafolio vamos gente 😄
Apuntes / Resumen / Notas 😊
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 GitHub.
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!!
Por favor enseña mas cursos de desarrollo web!!! Este curso lo entendí al 100% gracias a usted!
Emocionado de aprender CSS Grid para luego por fin empezar a aprender a programar en JavaScript.
El Curso que necesitaba 😄
CSS Grid → Grillas con columnas y filas 😄
Tarde pero deseando aprender!
Ahora toca el turno a CSS Grid, ya se Flexbox, a seguir preparandonos y nunca pares de aprende !!!
Excelente introducción!! Emocionado de iniciar este curso.
cada curso de platzi es muy bueno y pertinente, espero este no sea la excepción!!
Grid CSS!!!
let’s go to the end of the course ╰(°▽°)╯.
Finalmente, llevo queriendo ver este curso ya días y por fin.
Vamos con todo 💚
Por fin disponible el curso , ahora a seguir dandole en el aprendizaje de CCS grid.
Vamos!!
* Permite organizar elementos en filas y columnas, ofreciendo un control sobre el tamaño, posición y alineación de los elementos en ambos ejes.
* Facilita la creación de layouts más dinámicos y responsivos
Ok, este es el curso que necesito... Estoy a 21 días de tener que entregar i 'Challenge' del Bootcamp de Oracle y estoy teniendo problemas (Soy nuevo en programación). Necesito el CSS YAA y manipular DOM. Comenzaré por acá, ya luego termino la ruta de Desarrollador Web.
Las ganas de dominar y actualizar conocimientos con muchas, y espero mucho de este curso...
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.
Te recomiendo echar un vistazo a la [guía completa de CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/).
Muchas expectativas con este curso …mas conocimienro mas sabiduria
Ya lo estaba esperando con mucha ansia…
Backend developer here!
A por todas para domar el front!
CSS Grid Layout es un módulo de diseño en Cascading Style Sheets (CSS) que permite crear diseños de página en dos dimensiones de manera más fácil y eficiente. Proporciona una cuadrícula bidimensional flexible que permite colocar y organizar elementos en filas y columnas.
🙌🏻Vamos, qué si podemos!!!💪🏻
Me gusta este tema, con toda.
CSS Layout es una especificacion de CSS para implementar grillas en un sistema de dos dimensiones rows and columns, permitiendo jugar con cada una de las celdas al dejar diseñar areas y jugar con cada uno de los items de estas. Muy interesante el curso. Gracias Plazi
Hoy los diseñadores cuentan con dos métodos para implementar un diseño dinámico: además de CSS grid, también se puede usar Flexbox. Sin embargo, las dos técnicas difieren en algunos aspectos.
Flexbox es unidimensional. Esto quiere decir que los elementos solo se pueden mover a lo largo de un eje. En cambio, un diseño CSS grid ofrece al diseñador web dos dimensiones para la colocación de los objetos porque, en lugar de solo un eje, permite crear una rejilla con filas y columnas.
Tomado de
https://www.ionos.es/digitalguide/paginas-web/creacion-de-paginas-web/css-grid-layout/
Vamos a seguir sumando cursos!! A por todas!
Hola a todos, acá les dejo todos los ejercicios realizados en la clase, los retos y el proyecto final para el que quiera verlos:
- Online:
https://joffur.github.io/cursoCSSGridBasico/ - Repositorio:
https://github.com/joffur/cursoCSSGridBasico
Nunca paren de aprender 💚
tengo espectativas de este curso!
Un layout es la estructura visual de cómo quedaría la página web, se hace en forma de bloques y el GRID de CSS permite tener una red o matriz de espacios donde colocar ese diseño de Layout
👋Será un gusto estudiar con ustedes banda, a darle!
que emocion empezar con este nuevo curso, se nota super interezante
Deseando poder sacar el mayor provecho a este curso y entender mejor como posicionar espacios en mis sitios web. Éxito a todos
Wow! crei que seria mas enfocado a los fundamentos de CSS pero me agrada el tema dle Layout
A punto de terminar la primera fase del reto, lastima que ya se termino pero emocionado por seguir aprendiendo 😄
Genial! comenzemos!
Y @teffcode …??
Uno de retos de CSS es poner posicionar de manera optima los elementos. Así que si, estoy muy emocionado con este curso.
Vamos con todo…
Siento que con este curso voy a solucionar muchas dudas que tengo en los layuots.
Ok comenzamos el reto…
e pueden crear distintos tipos de layouts dependiendo del Viewport. Esta es una de las mayores fortalezas de CSS Grid
Les dejo un artículo interesante de lo que es CSS Grid
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
“y no discriminacion” enserio?
Es una especificación de CSS que nació por la necesidad de hacer layouts mucho más básicos.
Recomiendo velocidad 1.25x o 1.5px
A complementar con Css Grid!!
Vamos a empezar con la mejor actitud
Here we go ! I am used to use flexbox, but it’s time to learn how to use grid well. 👨🏻💻
CSS GRID, esta compuesto por filas y columnas, y es para posicionar elementos de manera mas fácil trabajando con esos dos ejes y ponerlos en cualquier posición que queramos
Listo para empezar
woowowowwowowowowowowowowowowow mis hormonas se disparan por este curso nuevo …XD
Let´s Go!!! Espere un monton este curso!! 🔥🔥🔥
Uff, cuánta expectativa y ganas de aprender CSS grid tengo! Nunca lo he usado y vengo de varios cursos donde he visto algunos conceptos. Vengo también de iniciar mi aprendizaje de flexbox, por lo que quiero seguir enriqueciendo mi camino de frontend developer 😃
Espero en este curso aprender Ese es uno de los temas mas complejos que vi de css
interesante…
Here we go, con estos nuevos aprendizajes
listo para comenzar
Vamos a aprender grid! siempre me ha dado duro grid poco a poco iremos aprendiendo
Extraño mucho el curso de CSS Grid con Leonidas, los ejercicios que hicimos estuvieron muy padres pero al dejar de practicar, he olvidado como se usaba. Tengo muchas ganas de volver a repasarlo y aprenderlo correctamente.
Muy feliz de por fin poder tomar este curso 😎
Super emocionada por llevar este curso!
Genial, Vamo a profundizar en el tema. Vamo a darlee
no hay slide, github o algo en que guiarnos de los recursos para este curso??
Emocionado por comenzar el curso. Se ve interesante.
Vamos a por todo con este magnifico curso.
Cuando uno aprende esto, siente que cambia la forma de ver las cosas. 😃
Excelente curso, muy interesante
Eh!! Emocionado de aprender CSS Grid 🥳
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?