grid

[Gae]

Buongiorno, ho realizzato una grid a 2 colonne, e funziona normalmente
Per alcune righe ho la necessità di usare la proprietà span per unire le 2 colonne e va bene.
Il problema sorge alla riga successiva che usa solo la prima colonna e non la seconda.
Come posso risolvere il problema?
Allego codice

HTML
<div class="grid-anamnesi-pato"> <!-- LayOut.css -->
<div class="grid-item">
<h4> SCELTA </h4>
<p> ID: <span class="padreID"> {{ anamnesticheScheda.pk }} </span> </p>
<label for="{{ form.AssociatoID.id_for_label }}"> Associato: </label>
{{ form.AssociatoID }} {{ form.AssociatoID.errors }}
</div>

<div class="grid-item">
<h4> ANAGRAFICA </h4>
<label for="{{ form.Sesso.id_for_label }}"> Sesso: </label>
<span id="associato-sesso-co" class="campo-collegato"> {{ Sesso }} </span>
</div>

<div class="grid-item-full">
<h4> ANAMNESI </h4>

<label for="{{ form.SportPratANAM.id_for_label }}"> Sport Praticato: </label>
{{ form.SportPratANAM }} <style> input#SportPratANAM {width: 60px;} </style> {{ form.SportPratANAM.errors }}
<label for="{{ form.IpertensioneANAM.id_for_label }}"> Ipertensione: </label>
</div>

<div class="grid-item-full">
<h4> Ha sofferto / soffre di: </h4>
<div>
<div class="grid-item">
<label for="{{ form.AllergiaAsma.id_for_label }}"> Allergia o Asma: </label>
{{ form.AllergiaAsma }} <style> input#AllergiaAsma {width: 60px;} </style> {{ form.AllergiaAsma.errors }}
</div>
<div class="grid-item">
<h4> SCELTA </h4>
<p> ID: <span class="padreID"> {{ anamnesticheScheda.pk }} </span> </p>
<div class="campoDiFianco">
<label for="{{ form.AssociatoID.id_for_label }}"> Associato: </label>
{{ form.AssociatoID }} {{ form.AssociatoID.errors }}
<label for="{{ form.Data.id_for_label }}"> Data Compil.: </label>
{{ form.CompilazioneData }} {{ form.CompilazioneData.errors }}
</div>
</div>

CSS
.grid-anamnesi-pato {
display: grid;
/*
grid-template-areas: "associatoSce associatoSce associatoAna associatoAna"
"anamnesi anamnesi anamnesi anamnesi"
"soffre1 soffre1 soffre2 soffre2";
*/
grid-template-columns: repeat(2, 1fr);
gap: 10px;
padding: 1em;
background: var(--bisque);
border: solid 1px var(--rosso);
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin: 50px auto;
width: 95%;
height: auto;
}
.grid-item {
grid-column: span 1;
border: 1px solid #ccc; /* opzionale: aggiunge un bordo alle colonne */
padding: 10px; /* opzionale: aggiunge un padding alle colonne */
}
.grid-item-full {
grid-column: span 2;
border: 1px solid #ccc;
}

 

[WmbertSea]

Ciao, per "riga successiva" intendi la riga che è interna a quelle della griglia principale?

Puoi chiarire, magari postando anche un esempio (immagine) del risultato che ti aspetti?
Ti chiedo anche di usare gli strumenti, disponibili nell'editor messaggi, per formattare opportunamente il codice che posti nel forum.

 

[Gae]

Grazie per la risposta, una riga sotto l'altra. Nel frattempo ho trovato cosa sbagliavo