Gap y colocación en la cuadrícula
Añada espacio entre las celdas de la cuadrícula con gap y coloque elementos mediante grid-column y grid-row.
Gap y colocación en la cuadrícula es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 3 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.
gap en CSS Grid
La propiedad gap establece el espacio entre las filas y las columnas de una cuadrícula. Sustituye a la propiedad anterior grid-gap y también funciona en Flexbox.
<div class="grid">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">3</div>
<div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">4</div>
<div style="background:#b57bff22;border:1px solid #b57bff;padding:12px;border-radius:4px;">5</div>
<div style="background:#3fd0c922;border:1px solid #3fd0c9;padding:12px;border-radius:4px;">6</div>
</div>row-gap y column-gap
Establezca independientemente los espacios entre filas y columnas:
<div class="grid" style="display:grid;grid-template-columns:repeat(3, 1fr);">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">3</div>
<div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">4</div>
<div style="background:#b57bff22;border:1px solid #b57bff;padding:12px;border-radius:4px;">5</div>
<div style="background:#3fd0c922;border:1px solid #3fd0c9;padding:12px;border-radius:4px;">6</div>
</div>Números de línea de la cuadrícula
CSS Grid numera sus líneas a partir de 1. Una cuadrícula de 3 columnas tiene las líneas de columna 1, 2, 3 y 4. Los números negativos cuentan desde el final: -1 es la última línea y -2 es la penúltima.
grid-column y grid-row
Coloque los elementos manualmente usando los números de línea con grid-column y grid-row:
<div style="display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:60px;gap:8px;">
<div class="header" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header (spans all 3 columns, row 1)</div>
<div class="main" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main (spans 2 columns, row 2)</div>
</div>La palabra clave span
Use span para expresar cuántas pistas debe abarcar un elemento en lugar de usar números de línea absolutos:
<div style="display:grid;grid-template-columns:repeat(4, 60px);grid-auto-rows:60px;gap:8px;">
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div class="featured" style="background:#4f8cff22;border:1px solid #4f8cff;padding:4px;">Featured (span 2x2)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
</div>Números de línea negativos
Los índices negativos cuentan desde el final. 1 / -1 siempre abarca todo el ancho de la cuadrícula, independientemente del número de columnas:
<div style="display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;">
<div class="full-width" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Full width (grid-column: 1 / -1)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Item</div>
<div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Item</div>
</div>Abreviatura grid-area
grid-area establece los cuatro valores de colocación de la cuadrícula en una sola propiedad: row-start / column-start / row-end / column-end.
<div style="display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:60px;gap:0;">
<div class="hero" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Hero (row 1 start, col 1 start, row 2 end, last column)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
</div>Colocación automática
Los elementos que no se colocan explícitamente se colocan automáticamente en la siguiente celda disponible siguiendo el algoritmo grid-auto-flow. De forma predeterminada, el navegador rellena las celdas de izquierda a derecha y de arriba abajo.
justify-items y align-items en Grid
En un contenedor de cuadrícula, justify-items alinea horizontalmente el contenido de las celdas; align-items lo alinea verticalmente. Ambos tienen stretch como valor predeterminado.
<div class="grid" style="min-height:120px;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;width:fit-content;">centered, top-aligned item</div>
</div>justify-self y align-self
Los elementos individuales de una cuadrícula pueden reemplazar la alineación del contenedor mediante justify-self y align-self:
<div style="display:grid;grid-template-columns:1fr;min-height:120px;">
<div class="featured-card" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Stretched horizontally, centered vertically</div>
</div>Elementos superpuestos de la cuadrícula
Varios elementos pueden ocupar la misma celda de la cuadrícula. Use z-index para controlar cuál aparece encima. Esto permite crear diseños por capas, como una imagen con texto superpuesto.
<div style="display:grid;grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(2, 60px);">
<div class="image" style="background:#4f8cff44;border:1px solid #4f8cff;">Image layer</div>
<div class="caption" style="background:rgba(0,0,0,0.6);color:#fff;align-self:end;padding:4px 8px;">Caption overlay</div>
</div>Comprobación rápida
Un elemento tiene grid-column: 2 / span 3. ¿Qué columnas ocupa en una cuadrícula de 5 columnas?
Repaso
gap añade espacios entre las celdas de la cuadrícula. Los elementos se colocan mediante números de línea con grid-column y grid-row. La palabra clave span especifica cuántas pistas debe abarcar un elemento. Use 1 / -1 para abarcar siempre todas las columnas. Los elementos de la cuadrícula pueden superponerse mediante z-index.
Preguntas frecuentes
¿La lección «Gap y colocación en la cuadrícula» es gratis?
Sí — el texto completo de «Gap y colocación en la cuadrícula» 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 «Gap y colocación en la cuadrícula»?
Añada espacio entre las celdas de la cuadrícula con gap y coloque elementos mediante grid-column y grid-row. 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 3 de 4.
¿Cuánto tiempo toma la lección «Gap y colocación en la cuadrícula»?
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