Grid e proprietà grid-template-areas

[Gae]

Salve, vorrei utilizzare la grid per una form di input.
Utilizzo la proprietà grid-template-areas per definire 3 colonne.
Vorrei utilizzarla in maniera dinamica, nel senso che nella prima inserirò sempre le label, nella seconda l'input, e nella terza vorrei inserire unicamente una foto con altre label e input.
Preciso che i 2 flussi, tra la prima e seconda colonna, sono diversi dalla terza.
Ho fatto una prima stesura e già non mi trovo col primo rigo.
Posto sia il css che l'html
Spero di essere stato chiaro
CSS

.grid-col3 {
  display: grid;
  grid-template-areas: "col1 col2 col3";
  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; /* Centra la form orizzontalmente */
  width: 80%;
  height: auto;
}
.col1 {
  grid-area: col1;
  align-self: center;

}
.col2 {
  grid-area: col2;
  align-self: center;

}
.col3 {
  grid-area: col3;
  align-self: center;
}

La parte iniziale dell'html, dove ho inserito 2 volte .col1 ID e Anagrafica si sovrappongono, mentre Anagrafica dovrebbe essere visualizzata nel secondo rigo

<div  class="grid-col3">
    <div class="col1"> ID: <span class="padreID"> {{ cliente.pk }} </span> </div>
    <div class="col2"> </div>
    <div class="col3"> </div>

        <div class="col1">
            <label for="{{ form.Anagrafica.id_for_label }}"> Anagrafica: </label>
        </div>
        <div class="col2">
            {{ form.Anagrafica }} {{ form.Anagrafica.errors }}
        </div>
        <div class="col3"> </div>

 

[WmbertSea]

Ciao, penso tu stia sbagliando approccio.

I nomi definiti nel grid-template-areas rappresentano delle aree in cui sostanzialmente dovrai disporre dei "singoli" elementi.
Ciascun elemento per il quale hai applicato grid-area, sarà quindi disposto nella corrispondente area,

Il problema sta nel fatto che stai applicando la stessa grid-area a più elementi contemporaneamente. Il sistema li va quindi a disporre "impilandoli" nella stessa area.

Preciso che i 2 flussi, tra la prima e seconda colonna, sono diversi dalla terza.

Probabilmente si può risolvere non definendo le specifiche aree per le prime due colonne, però non mi è ben chiaro quale debba essere il risultato che vuoi ottenere.
Ti invito a postare magari un'immagine di esempio o chiarire meglio.

 

[Gae]

Ciao, penso tu stia sbagliando approccio.

I nomi definiti nel grid-template-areas rappresentano delle aree in cui sostanzialmente dovrai disporre dei "singoli" elementi.
Ciascun elemento per il quale hai applicato grid-area, sarà quindi disposto nella corrispondente area,

Il problema sta nel fatto che stai applicando la stessa grid-area a più elementi contemporaneamente. Il sistema li va quindi a disporre "impilandoli" nella stessa area.


Probabilmente si può risolvere non definendo le specifiche aree per le prime due colonne, però non mi è ben chiaro quale debba essere il risultato che vuoi ottenere.
Ti invito a postare magari un'immagine di esempio o chiarire meglio.

 

[Gae]

Ciao, nel frattempo, come poi ho letto dalla tua risposta, ho cambiato approccio.
Ho definito una grid a 3 colonne e definito che la terza colonna andava usata in una certa maniera con questa specifica.

.grid-col3 .col3 {
grid-column: 3 / 4;
grid-column: oversized;
grid-row: 1 / 19;
background: #33a8a5;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

In questa maniera ho le prime 2 colonne con label ed input e la terza che uso unicamente per la foto e che riempi la colinna in verticale