diff --git a/frontend/src/components/posts/PostImageGrid.vue b/frontend/src/components/posts/PostImageGrid.vue
new file mode 100644
index 0000000..c77620f
--- /dev/null
+++ b/frontend/src/components/posts/PostImageGrid.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="fc-post-grid">
+    <button
+      v-for="(t, idx) in thumbnails"
+      :key="t.image_id"
+      type="button"
+      class="fc-post-grid__cell"
+      :aria-label="`Open image ${idx + 1} of ${thumbnails.length}`"
+      @click="openImage(t.image_id, idx)"
+    >
+      <img
+        :src="t.thumbnail_url"
+        :alt="`thumbnail ${idx + 1}`"
+        loading="lazy"
+      />
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useModalStore } from '../../stores/modal.js'
+
+const props = defineProps({
+  thumbnails: { type: Array, required: true },  // [{ image_id, thumbnail_url, ... }]
+})
+
+const modal = useModalStore()
+
+const imageIds = computed(() => props.thumbnails.map(t => t.image_id))
+
+function openImage (id, idx) {
+  modal.open(id, { postImageIds: imageIds.value, initialIndex: idx })
+}
+</script>
+
+<style scoped>
+.fc-post-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 6px;
+}
+.fc-post-grid__cell {
+  aspect-ratio: 4 / 3;
+  overflow: hidden;
+  border-radius: 4px;
+  cursor: pointer;
+  border: 0;
+  padding: 0;
+  background: rgb(var(--v-theme-background));
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+.fc-post-grid__cell:hover {
+  transform: scale(1.02);
+  box-shadow: 0 0 0 2px rgb(var(--v-theme-accent));
+}
+.fc-post-grid__cell img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+</style>