diff --git a/src/photo/PhotoGrid.tsx b/src/photo/PhotoGrid.tsx
index b5943d78..335e255f 100644
--- a/src/photo/PhotoGrid.tsx
+++ b/src/photo/PhotoGrid.tsx
@@ -5,6 +5,7 @@ import AnimateItems from '@/components/AnimateItems';
import { Camera } from '@/camera';
import MorePhotos from '@/photo/MorePhotos';
import { FilmSimulation } from '@/simulation';
+import { GRID_ASPECT_RATIO } from '@/site/config';
export default function PhotoGrid({
photos,
@@ -50,14 +51,30 @@ export default function PhotoGrid({
animateOnFirstLoadOnly={animateOnFirstLoadOnly}
staggerOnFirstLoadOnly={staggerOnFirstLoadOnly}
items={photos.map(photo =>
- ).concat(additionalTile ?? [])}
+ className={GRID_ASPECT_RATIO !== 0
+ ? cc(
+ 'aspect-square',
+ 'overflow-hidden',
+ '[&>*]:flex [&>*]:w-full [&>*]:h-full',
+ '[&>*>*]:object-cover',
+ )
+ : undefined}
+ style={{
+ ...GRID_ASPECT_RATIO !== 0 && {
+ aspectRatio: GRID_ASPECT_RATIO ?? 1,
+ },
+ }}
+ >
+
+ ).concat(additionalTile ?? [])}
/>
{showMorePath &&
}
diff --git a/src/site/config.ts b/src/site/config.ts
index 119c9ed4..76666fb2 100644
--- a/src/site/config.ts
+++ b/src/site/config.ts
@@ -54,6 +54,9 @@ export const SHOW_FILM_SIMULATIONS =
process.env.NEXT_PUBLIC_HIDE_FILM_SIMULATIONS !== '1';
export const OG_TEXT_BOTTOM_ALIGNMENT =
(process.env.NEXT_PUBLIC_OG_TEXT_ALIGNMENT ?? '').toUpperCase() === 'BOTTOM';
+export const GRID_ASPECT_RATIO = process.env.NEXT_PUBLIC_GRID_ASPECT_RATIO
+ ? parseFloat(process.env.NEXT_PUBLIC_GRID_ASPECT_RATIO)
+ : undefined;
export const CONFIG_CHECKLIST_STATUS = {
hasPostgres: (process.env.POSTGRES_HOST ?? '').length > 0,