Aprende CSS Grid Layout en 11 Minutos
Вставка
- Опубліковано 2 сер 2024
- En este video vemos cómo dominar CSS Grid para crear layouts flexibles y responsivos. Aprenderás a utilizar propiedades clave como display: grid, grid-template-rows, grid-template-columns, y grid-template-areas para diseñar tu grilla. Exploraremos cómo usar gap, grid-auto-rows, grid-auto-flow, y minmax() para optimizar tus diseños. Además, veremos cómo justify-items, align-items, justify-content, y align-content pueden mejorar la alineación de tus elementos. ¡Descubre cómo CSS Grid puede transformar tus proyectos de desarrollo web! #CSSGrid #WebDesign #ResponsiveLayout
0:00 Intro
0:09 display: grid
0:31 grid-template-rows y grid-template-columns
1:34 repeat()
1:53 grid-template
3:07 grid-area
3:43 gap
4:12 posicionar elementos
4:56 grid-row y grid-column
5:54 grid-area
6:16 span
6:34 suporponer elementos
7:09 grilla explícita e implícita
8:24 alinear elementos
9:41 alinear grilla
10:25 responsive
Si queres ver más videos suscribite al canal: / @codinghelptutorials
Te sirvió este video? Sabias usar CSS Grid? Deja tu comentario abajo!