Display Grid y columnas y filas de plantilla
Active CSS Grid y defina pistas de columnas y filas mediante grid-template-columns y grid-template-rows.
Display Grid y columnas y filas de plantilla es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
Activación de CSS Grid
CSS Grid se activa con display: grid en un contenedor. Sus hijos directos se convierten automáticamente en elementos de cuadrícula que se colocan en celdas.
<div class="layout">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">Item A</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">Item B</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">Item C</div>
</div>grid-template-columns
grid-template-columns define el número y el tamaño de las columnas. Cada valor crea una pista de columna.
<div class="layout">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">200px column</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr column</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">1fr column</div>
</div>grid-template-rows
grid-template-rows define las pistas de fila explícitas. Los elementos que superan las filas definidas crean filas implícitas.
<div class="layout" style="min-height:220px;">
<div style="grid-column:span 2;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header (row: auto)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main left (row: 1fr)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main right (row: 1fr)</div>
<div style="grid-column:span 2;background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer (row: auto)</div>
</div>Pistas de columnas y filas
Cada valor de grid-template-columns o grid-template-rows crea una pista. Las pistas pueden utilizar cualquier unidad de tamaño:
- Fijas:
200px,10rem - Flexibles:
1fr - Basadas en el contenido:
auto,min-content,max-content
La unidad fr
fr (unidad fraccionaria) distribuye el espacio disponible después de restar los tamaños fijos. 1fr 2fr crea columnas en una proporción de 1:2.
<div class="grid">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">300px fixed</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr (1x share)</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">2fr (2x share)</div>
</div>auto en las pistas
auto en una pista ajusta su tamaño al contenido. Como columna, toma el tamaño mínimo que necesita su celda más ancha; como fila, se ajusta a la celda más alta.
<div class="sidebar-layout">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Sidebar (auto width)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main content (1fr fills the rest)</div>
</div>Ejemplo de diseño de página
Un diseño de página común con tres filas: encabezado, contenido principal y pie de página:
<div class="page">
<header style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</header>
<main style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main (fills available space)</main>
<footer style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer</footer>
</div>Abreviatura grid-template
grid-template combina filas y columnas:
<div class="grid" style="display:grid;min-height:180px;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main</div>
<div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer</div>
</div>Inspección de Grid en DevTools
DevTools de Chrome y Firefox puede superponer las líneas de las pistas de la cuadrícula en la página. Haga clic en el distintivo de cuadrícula del panel Elements para visualizar las columnas, las filas, los espacios y las áreas con nombre.
Elección entre Grid y Flexbox
Use Grid cuando necesite controlar simultáneamente las filas y las columnas. Use Flexbox para diseños unidimensionales (una fila de elementos o una columna de elementos). Muchos diseños utilizan ambos.
Números de línea
Grid numera automáticamente sus líneas a partir de 1. Puede hacer referencia a estos números para colocar elementos manualmente. Las líneas de las columnas van de 1 a n+1, donde n es el número de columnas.
<div style="display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;">
<div class="header" style="grid-column:1 / -1;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header — spans all columns (grid-column: 1 / -1)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Item 2</div>
<div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Item 3</div>
</div>Comprobación rápida
¿Qué crea grid-template-columns: 200px 1fr 2fr?
Repaso
display: grid crea un contenedor de cuadrícula. grid-template-columns y grid-template-rows definen las pistas. La unidad fr distribuye proporcionalmente el espacio restante. auto ajusta el tamaño al contenido. Grid es ideal para controlar diseños bidimensionales.
Aprende CSS con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 40
- Lecciones
- 159
Preguntas frecuentes
¿La lección «Display Grid y columnas y filas de plantilla» es gratis?
Sí — el texto completo de «Display Grid y columnas y filas de plantilla» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Display Grid y columnas y filas de plantilla»?
Active CSS Grid y defina pistas de columnas y filas mediante grid-template-columns y grid-template-rows. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Display Grid y columnas y filas de plantilla»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Display Grid y columnas y filas de plantilla
- La unidad fr y repeat
- Gap y colocación en la cuadrícula
- Áreas de plantilla de la cuadrícula