HomeCasa Prompts

Risolvere un problema di layout CSS (Flexbox, Grid, overflow e z-index)

Scopri perché il tuo CSS non si comporta come previsto (overflow, elementi non centrati, z-index che non funziona) con la causa spiegata, come verificarla nei DevTools e la correzione minima. Pensato per ChatGPT, Claude, Gemini e Microsoft Copilot. Include 5 variabili personalizzabili e puoi copiarlo gratuitamente con un clic.

Principiante · Codice · In attesa di revisione editoriale

Pensato per:

Prompt

Agisci come esperto di CSS che spiega con chiarezza le cause dei problemi di layout, senza toppe.

Contesto:
- HTML rilevante: {{html}}
- CSS rilevante: {{css}}
- Cosa succede: {{problema}}
- Cosa mi aspettavo: {{atteso}}
- Dove succede: {{dove}}

Se il problema può dipendere da un elemento padre, da stili globali o da un framework che non compare nel codice, chiedimi quella parte prima di proporre la soluzione.

Consegna:
1. La causa principale spiegata in modo semplice, nominando il concetto coinvolto (box model, min-width: auto negli elementi flex, overflow nelle tracce Grid con 1fr, collasso dei margini, contesti di impilamento, posizionamento, unità viewport su mobile).
2. Come confermarla passo per passo nei DevTools del browser: quale elemento ispezionare, quale pannello guardare (computed, overlay di Flexbox e Grid, livelli) e quale valore rivela il problema.
3. La correzione minima con il codice esatto che cambia, prima e dopo.
4. Un'alternativa più robusta se la correzione minima è fragile, con pro e contro.
5. Verifiche per non rompere altro: altre larghezze di schermo, testi più lunghi, altri browser.
6. Una breve regola pratica per evitare questo problema in futuro.

Vincoli:
- Niente !important, numeri magici o overflow: hidden per nascondere il sintomo, salvo giustificazione.
- Non riscrivere tutto il foglio di stile: tocca solo ciò che serve.
- Se il problema non è riproducibile con il codice fornito, dillo e spiega cosa manca.

Formato: causa, verifica, correzione con blocchi di codice, alternativa e checklist.

Come usarlo

  1. Riduci HTML e CSS al minimo indispensabile dove si verifica il bug, compreso il contenitore padre. 2. Descrivi cosa vedi e cosa ti aspettavi, con larghezza dello schermo e browser. 3. Applica la correzione, esegui le verifiche e torna con il risultato se il problema resta.

Esempio d'uso

Problema: su mobile la pagina scorre in orizzontale e una card della griglia esce dal contenitore · Atteso: due colonne che si adattano alla larghezza · Dove: Safari su iPhone, sotto i 400 px.

Esempio di risultato

Causa

1fr equivale a minmax(auto, 1fr): il minimo di ogni colonna è la larghezza minima del suo contenuto. Con white-space: pre il <pre> non può andare a capo, quindi la riga più lunga fissa quel minimo e la colonna supera lo schermo.

Come verificarlo

Nei DevTools attiva l'overlay Grid su .griglia: la seconda traccia sporge dal contenitore. In «Calcolato», il <pre> è più largo del viewport.

Correzione minima

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

/* Dopo */
.griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.card pre { white-space: pre; overflow-x: auto; }

minmax(0, 1fr) consente alla colonna di restringersi sotto la larghezza del contenuto e overflow-x: auto fa scorrere solo il blocco di codice, non tutta la pagina.

Alternativa più robusta

Una sola colonna sugli schermi stretti: grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)).

Regola pratica

Se una traccia 1fr contiene testo che non può andare a capo, usa minmax(0, 1fr) o min-width: 0 sul figlio…

Dati chiave

Categoria
Programmazione e sviluppo · HTML e CSS
Tipo di output
Codice
Livello
Principiante
Pensato per
ChatGPT, Claude, Gemini e Microsoft Copilot
Verificato in
In attesa di verifica editoriale
Variabili
HTML rilevante, CSS rilevante, Cosa succede, Cosa mi aspettavo e Dove succede
Lingua
Italiano
Prezzo
Gratuito, senza registrazione
Aggiornato
07/11/2026

Domande frequenti

Perché il mio z-index non funziona?

Quasi sempre perché gli elementi stanno in contesti di impilamento diversi: un padre con transform, opacity inferiore a 1, posizionamento con z-index o isolation ne crea uno nuovo, e lo z-index compete solo al suo interno.

Perché un elemento flex non si restringe anche se manca spazio?

Gli elementi flex hanno min-width: auto di default e non scendono sotto la dimensione del contenuto, come una parola lunga o un’immagine. Impostare min-width: 0 sull’elemento di solito risolve.

Come trovo l’elemento che causa lo scroll orizzontale?

Nei DevTools cerca l’elemento più largo della finestra con gli overlay di layout o con un outline temporaneo su tutti gli elementi. Il prompt ti guida in questa verifica.

A cosa serve questo prompt?

Scopri perché il tuo CSS non si comporta come previsto (overflow, elementi non centrati, z-index che non funziona) con la causa spiegata, come verificarla nei DevTools e la correzione minima.

Con quali strumenti di IA funziona?

È pensato per ChatGPT, Claude, Gemini e Microsoft Copilot. Non lo abbiamo ancora verificato in questi strumenti, quindi i risultati possono variare da uno all'altro.

Come personalizzo il prompt?

Clicca su «Personalizza» e compila le variabili (HTML rilevante, CSS rilevante, Cosa succede, Cosa mi aspettavo e Dove succede). Il testo si aggiorna all'istante e poi puoi copiarlo con un clic. I valori vengono salvati solo nel tuo browser.

Serve esperienza per usarlo?

No. È un prompt di livello principiante: basta compilare i dettagli e incollarlo nel tuo strumento di IA.

Questo prompt è gratuito?

Sì. Tutti i prompt di HomeCasa Prompts sono gratuiti, senza registrazione né abbonamento. Puoi usarli anche in progetti professionali.

Posso fidarmi dell'output dell'IA?

Consideralo una bozza di alta qualità: verifica sempre dati, cifre e affermazioni importanti prima di pubblicare o prendere decisioni.

Prompt correlati