Dimensione Grid

**Erwin19** · 10-05-2022, 15:17

Ho un problema con css. Ho realizzato una griglia. Tuttavia se dovessi impostare una gif come immagine di presentazione per ogni cella, in fase di caricamento pagina, la griglia non rimane ben posizionata come quando le immagini sono caricate al 100%, ma si crea quell effetto di caricamento che mi va a spostare i tutto.

In pratica io desidero che lo spazio occupato di ogni cella rimanga tale indipendentemente dal tempo in cui il browser carica le immagini di ogni cella. Questo per evitare lo spostamento delle altre celle creando quell'effetto in cui le celle non sono allineate perché alcune immagini devono essere caricate.

Ho provato in vari modi, ma non ci sono riuscito. Ovvio che il problema si verifica quando il volume da caricare risulta notevole perché nell'esempio noterete che la pagina carica correttamente tutto in frazione di secondi. Ma se le gif fosse più pesanti e le celle molte di più capireste immediatamente quale problema sto affrontando con insuccesso.

codice:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>TestGrid</title>
    

<style>


body{
width:100%;
height:95%;
margin:0;
padding:0;
font-family:"Tahoma";
background-color:#292929;
}
img{
max-width:100%;
max-height:120%;
display:block;
}
.image{
opacity:0.6;
transition:.5s ease;
cursor:pointer;
}
.container-grid{
margin-top:60px;
margin-right:30px;
display:grid;
grid-template-columns:min-content max-content fit-content(100em);
grid-template-columns:1fr 1fr 1fr 1fr;
grid-template-rows:1fr 1fr;
}
.cell{
color:#C0C0C0;
text-align:center;
margin:15px;text-align:
left;

}
.cell-1{
grid-row:1/3;
grid-column:1/3;
}
.image{
opacity:0.5;
transition:.5s ease;
cursor:pointer;
}
.cell:hover .image{
opacity:1;
}



</style>
</head>
<body>

<h1>Grid Lines</h1>

    <div class="container-grid">
        <div class="cell cell-1">
            <img class="image" src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" >            
            <h3>Title 1</h3> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        </div>
        <div class="cell cell-2">
                <img class="image" src="https://www.mathworks.com/matlabcentral/mlc-downloads/downloads/submissions/21944/versions/3/previews/Animated_GIF/DancingPeaks.gif">            
            <h3>Title 2</h3>  
        </div>
        <div class="cell cell-3">
            <img class="image" src="https://www.mathworks.com/matlabcentral/mlc-downloads/downloads/submissions/21944/versions/3/previews/Animated_GIF/DancingPeaks.gif">
            <h3>Title 3</h3>  
        </div>
        <div class="cell cell-4">
            <img class="image" src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" >
            <h3>Title 4</h3>  
        </div>    
    </div>

</body>
</html>

**KillerWorm** · 11-05-2022, 23:20

Mi pare una questione più che altro di impostazione logica. Partiamo dal fatto che non si può avere la botte piena e la moglie ubriaca.

A meno che non siano specificate preventivamente le dimensioni di ogni immagine interessata, il browser non può conoscerne il reale ingombro finché queste non siano state appunto caricate.

Se la tua griglia deve basarsi sulle dimensioni dei contenuti, e vuoi avere delle dimensioni fisse, dovrai pertanto specificarle a priori.

In tal caso puoi applicare gli attributi HTML width e height direttamente nei tag <img>, se ogni immagine ha delle proprie dimensioni specifiche, oppure definire una regola CSS per applicare delle dimensioni uguali per tutte.

O ancora, se non sai a priori quali siano le dimensioni esatte di ogni singola immagine, potresti comunque definire via CSS le dimensioni delle relative celle in modo che le immagini restino confinate in qualche modo, ciascuna all'interno della propria cella.

Questo a grandi linee.

In alternativa si potrebbe pensare ad un "preloader" dell'intera pagina in modo da mostrarla solo quando è stato completato il caricamento di tutte le immagini interessate... ma questo tipo di approccio lascia il tempo che trova (si usava molto all'era dei siti flash).

Potrebbero esserci altre soluzioni ma personalmente non mi viene in mente nient'altro.
Prova a valutare da te come pensi di procedere ed eventualmente si potrà ragionare su come impostare la questione.

**Erwin19** · 12-05-2022, 14:48

Ciao e grazie per la risposta. Credo di aver risolto inserendo width:100% nella classe .image ma non ne sono certo.
Purtroppo il tag img non posso toccarlo, perché è chiamato anche in altre situazioni e non vorrei compremettere qualcosa. Infatti la struttura delle celle nel file allegato ha dimensioni differenti.

**Utonto Tonto** · 12-05-2022, 21:40

Proprio ieri stavo leggendo quest'articolo: https://www.smashingmagazine.com/202...portant-again/

**Erwin19** · 13-05-2022, 19:50

Originariamente inviata da Utonto Tonto

Proprio ieri stavo leggendo quest'articolo: https://www.smashingmagazine.com/202...portant-again/

Il problema è che io non posso impostare una dimensione alle immagine proprio perché ogni immagine ha una sua dimensione. Quindi se imposto 400 o più o meno, è probabile che un altra immagine sia 50, quindi la dimensione fissa scompensa quelle che non condividono la stessa dimensione. Vi ho allegato il codice apposta dove nella prima cella c'è una dimensione differente dalle altre.

Discussione: Dimensione Grid

Strumenti discussione

Ricerca discussione

Visualizza

Dimensione Grid

Permessi di invio