diff --git a/packages/histoire-app/src/app/components/story/StoryVariantGrid.vue b/packages/histoire-app/src/app/components/story/StoryVariantGrid.vue
index 98ba78fb..ef086f68 100644
--- a/packages/histoire-app/src/app/components/story/StoryVariantGrid.vue
+++ b/packages/histoire-app/src/app/components/story/StoryVariantGrid.vue
@@ -97,10 +97,11 @@ function updateSize () {
if (!gridEl.value) return
- const firstCellEl = gridEl.value.children[0] as HTMLDivElement
- if (!firstCellEl) return
-
- gridColumnWidth.value = firstCellEl.clientWidth
+ if (gridTemplateWidth.value.endsWith('%')) {
+ gridColumnWidth.value = viewWidth.value * parseInt(gridTemplateWidth.value) / 100 - gap
+ } else {
+ gridColumnWidth.value = parseInt(gridTemplateWidth.value)
+ }
}
onMounted(() => {
@@ -125,31 +126,33 @@ const columnCount = computed(() => Math.min(storyStore.currentStory.variants.len