5 de octubre de 2020
CSS GRID | Guía completa DESDE CERO
Curso práctico de CSS Grid desde cero.
El CSS Grid es una herramienta súper útil que si logramos dominar podemos conseguir resultados increíbles con pocas líneas de css. En este video les traigo una guía con todo (o una gran parte) de lo que tiene el CSS Grid. Todo explicado con ejemplos prácticos.
✅ Contenido:
Introducción y configuración
display grid vs inline-grid
grid-template-columns con length y %
min-content vs max-content vs fit-content
auto vs fr
minmax
repeat
auto-fit vs auto-fill
grid-template-rows
grid-auto-rows
grid-auto-flow
grid-auto-columns
row-gap vs column-gap vs gap
align-items vs justify-items vs place-items
align-content vs justify-content vs place-content
align-self vs justify-self vs place-self
grid-column-start vs grid-column-end vs grid-column
grid-row-start vs grid-row-end vs grid-row
líneas con números negativos
span
grid-auto-rows: row dense
nombrar las líneas
solapar elementos y z-index
grid-area
layout con grid-template-areas
el atajo grid-template
el atajo grid
📺 Videos relacionados
Maquetado responsive con CSS Grid: https://youtu.be/T4t00Hd3qZc
Galería de imágenes responsive usando CSS GRID: https://youtu.be/f3902x_dqqQ
👀 Les sugiero pongan el video en 1080p para que puedan ver el código con nitidez.
🔔 Suscríbete al canal y activa la campanita para que no te pierdas ningún video:
https://www.youtube.com/yoelvism?sub_confirmation=1
🐤Sígueme en twitter:
https://twitter.com/ymulenll
📌Enlaces:
https://drafts.csswg.org/css-grid/
proyecto en su estado inicial: https://github.com/ymulenll/css-grid-guide
Muchas gracias por ver este video, espero le haya sido útil.
El CSS Grid es una herramienta súper útil que si logramos dominar podemos conseguir resultados increíbles con pocas líneas de css. En este video les traigo una guía con todo (o una gran parte) de lo que tiene el CSS Grid. Todo explicado con ejemplos prácticos.
✅ Contenido:
Introducción y configuración
display grid vs inline-grid
grid-template-columns con length y %
min-content vs max-content vs fit-content
auto vs fr
minmax
repeat
auto-fit vs auto-fill
grid-template-rows
grid-auto-rows
grid-auto-flow
grid-auto-columns
row-gap vs column-gap vs gap
align-items vs justify-items vs place-items
align-content vs justify-content vs place-content
align-self vs justify-self vs place-self
grid-column-start vs grid-column-end vs grid-column
grid-row-start vs grid-row-end vs grid-row
líneas con números negativos
span
grid-auto-rows: row dense
nombrar las líneas
solapar elementos y z-index
grid-area
layout con grid-template-areas
el atajo grid-template
el atajo grid
📺 Videos relacionados
Maquetado responsive con CSS Grid: https://youtu.be/T4t00Hd3qZc
Galería de imágenes responsive usando CSS GRID: https://youtu.be/f3902x_dqqQ
👀 Les sugiero pongan el video en 1080p para que puedan ver el código con nitidez.
🔔 Suscríbete al canal y activa la campanita para que no te pierdas ningún video:
https://www.youtube.com/yoelvism?sub_confirmation=1
🐤Sígueme en twitter:
https://twitter.com/ymulenll
📌Enlaces:
https://drafts.csswg.org/css-grid/
proyecto en su estado inicial: https://github.com/ymulenll/css-grid-guide
Muchas gracias por ver este video, espero le haya sido útil.