Skip to content
NeuralSkills
Depuracion

Depurador de Layout CSS

Corrige bugs visuales de layout — overflow, z-index, problemas de flexbox y grid, y fallos en breakpoints responsivos.

Principiante Gratis Publicado: 15 de abril de 2026
Herramientas Compatibles claude-codechatgptgeminicopilotcursorwindsurfuniversal

El Problema

Los bugs de layout CSS son visualmente obvios pero logicamente desconcertantes. Un elemento desborda su contenedor, un modal aparece detras de una sidebar, los items de flexbox se niegan a hacer wrap, los items de grid colapsan a altura cero, o el layout se rompe exactamente a 768px. La desconexion entre las propiedades CSS y lo que ves en pantalla hace que depurar CSS sea especialmente frustrante.

El Prompt

Eres un experto en depuracion de layout CSS. Diagnostica y corrige este bug visual:

LAYOUT ESPERADO: [describe como deberia verse]
LAYOUT ACTUAL: [describe el problema — overflow, desalineacion, tamano incorrecto, orden de apilamiento incorrecto]
VIEWPORT: [desktop/tablet/mobile, ancho especifico si es relevante]
NAVEGADOR: [Chrome/Safari/Firefox + version si es problema cross-browser]

ESTRUCTURA HTML:
[pega el HTML relevante — incluye elementos padre y hermanos]

CSS APLICADO:
[pega el CSS relevante — incluye estilos del padre, del elemento y media queries]

Diagnostica el layout:
1. **Auditoria de Box Model**: Verificar width, height, padding, margin, border, box-sizing del elemento Y su padre.
2. **Analisis del Containing Block**: Cual es el containing block del elemento? Es el esperado?
3. **Mapa de Stacking Context**: Si involucra z-index, mapear cada stacking context desde root hasta el elemento.
4. **Diagnostico Flex/Grid**: Verificar flex-basis, flex-shrink, min-width, calculos de grid-template.
5. **Check de Breakpoints Responsivos**: En el ancho del viewport reportado — cuales media queries estan activas? Hay conflictos?
6. **El Fix**: Proporcionar el cambio CSS minimo — explicar POR QUE funciona, no solo que cambiar.

Ejemplo de Salida

Box Model: Padre tiene padding: 20px, hijo tiene width: 100% + padding: 16px — total excede al padre por 32px
Causa raiz: box-sizing es content-box (default) en el hijo — padding se suma al width en vez de incluirse
Fix: Agregar box-sizing: border-box al elemento hijo
Por que: border-box incluye padding y border en el width declarado, asi 100% realmente significa "caber dentro del padre"

Cuando Usar

Usa este skill cuando elementos desbordan, se apilan incorrectamente, colapsan, o se rompen a anchos de viewport especificos. Perfecto para problemas de alineacion flexbox, layout grid, guerras de z-index y bugs de breakpoints responsivos.

Tips Pro

  • Usa el highlighting de elementos de DevTools — pasa el cursor sobre los elementos para ver su box model visualmente. Revela problemas de tamano inmediatamente.
  • El truco de outline: 1px solid red — agrega outlines (no borders, que afectan el layout) a todos los elementos para visualizar los bounding boxes reales.
  • Verifica min-width: auto en flex items — este default previene que los flex items se encojan por debajo del tamano de su contenido. Usa min-width: 0 para permitir encogimiento correcto.
  • z-index solo funciona con elementos posicionados — z-index no tiene efecto en position: static (el default).