HomeCasa Prompts

Arreglar un problema de maquetación CSS (Flexbox, Grid, desbordes y z-index)

Descubre por qué tu CSS no se comporta como esperas (desbordes, elementos que no se centran, z-index que no funciona) con la causa explicada, cómo comprobarla en DevTools y la corrección mínima. Pensado para ChatGPT, Claude, Gemini y Microsoft Copilot. Incluye 5 variables personalizables y se copia gratis en un clic.

Principiante · Código · Pendiente de revisión editorial

Pensado para:

Prompt

Actúa como experto en CSS que explica las causas de los problemas de maquetación de forma clara, sin parches.

Contexto:
- HTML relevante: {{html}}
- CSS relevante: {{css}}
- Qué ocurre: {{problema}}
- Qué esperaba: {{esperado}}
- Dónde ocurre: {{donde}}

Si el problema puede venir de un elemento padre, de estilos globales o de un framework que no aparece en el código, pídeme esa parte antes de proponer la solución.

Entregables:
1. La causa raíz explicada en lenguaje sencillo, nombrando el concepto implicado (modelo de caja, min-width: auto en elementos flex, desbordes en columnas de Grid con 1fr, colapso de márgenes, contextos de apilamiento, posicionamiento, unidades de viewport en móvil).
2. Cómo confirmarlo paso a paso con las DevTools del navegador: qué elemento inspeccionar, qué panel mirar (calculado, superposiciones de Flexbox y Grid, capas) y qué valor delata el problema.
3. La corrección mínima con el código exacto que cambia, comparando antes y después.
4. Una alternativa más robusta si la corrección mínima es frágil, con sus pros y contras.
5. Comprobaciones para no romper otra cosa: otros anchos de pantalla, textos más largos, otros navegadores.
6. Una regla práctica breve para evitar este problema en el futuro.

Restricciones:
- No uses !important, valores mágicos ni overflow: hidden para tapar el síntoma, salvo que lo justifiques.
- No reescribas toda la hoja de estilos: toca solo lo necesario.
- Si con el código que te doy no se puede reproducir el problema, dilo y explica qué falta.

Formato: causa, verificación, corrección con bloques de código, alternativa y lista de comprobaciones.

Cómo usarlo

  1. Recorta el HTML y el CSS mínimos donde ocurre el fallo, incluido el contenedor padre. 2. Describe qué ves y qué esperabas, con el ancho de pantalla y el navegador. 3. Aplica la corrección, sigue las comprobaciones y vuelve con el resultado si persiste.

Ejemplo de uso

Problema: en móvil la página tiene scroll horizontal y una tarjeta de una rejilla se sale del contenedor · Esperado: dos columnas que se ajusten al ancho · Dónde: Safari en iPhone, menos de 400 px.

Resultado de ejemplo

Causa

1fr equivale a minmax(auto, 1fr): el mínimo de cada columna es el ancho mínimo de su contenido. Con white-space: pre, el <pre> no puede partir líneas, así que su línea más larga fija ese mínimo y la columna crece más allá de la pantalla.

Cómo confirmarlo

En el inspector, activa la superposición de Grid en .rejilla: la segunda pista sobresale del contenedor. En «Calculado», el <pre> tiene un ancho mayor que el viewport.

Arreglo mínimo

/* Antes */
.rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* Después */
.rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.tarjeta pre { white-space: pre; overflow-x: auto; }

minmax(0, 1fr) permite que la columna se encoja por debajo de su contenido, y overflow-x: auto da scroll solo dentro del bloque de código, no en toda la página.

Alternativa más robusta

Una sola columna en pantallas estrechas: grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)).

Regla práctica

Si una pista 1fr contiene texto que no puede partirse, usa minmax(0, 1fr) o min-width: 0 en el hijo…

Datos clave

Categoría
Programación y desarrollo · HTML y CSS
Tipo de resultado
Código
Nivel
Principiante
Pensado para
ChatGPT, Claude, Gemini y Microsoft Copilot
Verificado en
Pendiente de verificación editorial
Variables
HTML relevante, CSS relevante, Qué ocurre, Qué esperaba y Dónde ocurre
Idioma
Español
Precio
Gratis, sin registro
Actualizado
07/11/2026

Preguntas frecuentes

¿Por qué mi z-index no funciona?

Casi siempre porque los elementos están en contextos de apilamiento distintos: un padre con transform, opacity menor que 1, position con z-index o isolation crea uno nuevo, y el z-index solo compite dentro de él.

¿Por qué un elemento flex no se encoge aunque haya poco espacio?

Porque los elementos flex tienen min-width: auto por defecto y no se reducen por debajo de su contenido, como una palabra larga o una imagen. Poner min-width: 0 en el elemento suele resolverlo.

¿Cómo encuentro qué elemento causa el scroll horizontal?

En DevTools, revisa qué elemento es más ancho que la ventana con las superposiciones de layout o con un outline temporal en todos los elementos. El prompt te guía en esa comprobación.

¿Para qué sirve este prompt?

Descubre por qué tu CSS no se comporta como esperas (desbordes, elementos que no se centran, z-index que no funciona) con la causa explicada, cómo comprobarla en DevTools y la corrección mínima.

¿Con qué herramientas de IA funciona?

Está pensado para ChatGPT, Claude, Gemini y Microsoft Copilot. Todavía no lo hemos verificado en estas herramientas, por lo que los resultados pueden variar entre ellas.

¿Cómo personalizo el prompt?

Pulsa «Personalizar» y rellena las variables (HTML relevante, CSS relevante, Qué ocurre, Qué esperaba y Dónde ocurre). El texto se actualiza al instante y después puedes copiarlo con un clic. Los valores se guardan solo en tu navegador.

¿Necesito experiencia para usarlo?

No. Es un prompt de nivel principiante: basta con rellenar los datos y pegarlo en tu herramienta de IA.

¿Este prompt es gratis?

Sí. Todos los prompts de HomeCasa Prompts son gratuitos, sin registro ni suscripción. Puedes usarlos también en proyectos profesionales.

¿Puedo fiarme del resultado de la IA?

Úsalo como un borrador de calidad: revisa siempre datos, cifras y afirmaciones importantes antes de publicarlos o tomar decisiones.

Prompts relacionados