CSS GRID | Guía completa DESDE CERO

Опубликовано: 03 Июнь 2026
на канале: Yoelvis Mulen { code }

29,031

1.2k

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:
00:00 Introducción y configuración
01:25 display grid vs inline-grid
02:43 grid-template-columns con length y %
03:42 min-content vs max-content vs fit-content
06:21 auto vs fr
07:45 minmax
08:52 repeat
10:04 auto-fit vs auto-fill
14:01 grid-template-rows
14:38 grid-auto-rows
15:32 grid-auto-flow
16:44 grid-auto-columns
18:07 row-gap vs column-gap vs gap
19:29 align-items vs justify-items vs place-items
21:54 align-content vs justify-content vs place-content
26:21 align-self vs justify-self vs place-self
29:18 grid-column-start vs grid-column-end vs grid-column
31:11 grid-row-start vs grid-row-end vs grid-row
31:50 líneas con números negativos
32:39 span
33:55 grid-auto-rows: row dense
34:35 nombrar las líneas
37:08 solapar elementos y z-index
38:10 grid-area
39:27 layout con grid-template-areas
43:06 el atajo grid-template
45:10 el atajo grid

📺 Videos relacionados
Maquetado responsive con CSS Grid:    • Maquetado responsive con CSS Grid | Diseño...
Galería de imágenes responsive usando CSS GRID:    • Galería de imágenes responsive usando CSS ...

👀 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_...

🐤Sígueme en twitter:
  / ymulenll

📌Enlaces:
https://drafts.csswg.org/css-grid/

proyecto en su estado inicial: https://github.com/ymulenll/css-grid-...

Muchas gracias por ver este video, espero le haya sido útil.
#css #grid