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.