diff --git a/packages/styleUtils/layout/gridList/style.ts b/packages/styleUtils/layout/gridList/style.ts
index 54d90bef4..5fde9e419 100644
--- a/packages/styleUtils/layout/gridList/style.ts
+++ b/packages/styleUtils/layout/gridList/style.ts
@@ -7,7 +7,9 @@ export const gridColumnTemplate = columnCount => {
           acc[breakpoint] = `repeat(${columnCount[breakpoint]}, 1fr)`;
           return acc;
         }, {})
-      : `repeat(${columnCount}, 1fr)`;
+      : `repeat(${columnCount}, minmax(0, 1fr))`;
+  // 👆explicitly setting the min to 0 so content doesn't overflow the grid cell
+  // see: https://github.com/rachelandrew/cssgrid-ama/issues/25
 
   return getResponsiveStyle("grid-template-columns", gridTemplateColumns);
 };
diff --git a/packages/styleUtils/layout/gridList/tests/__snapshots__/GridList.test.tsx.snap b/packages/styleUtils/layout/gridList/tests/__snapshots__/GridList.test.tsx.snap
index e5d0f9977..32244d8cf 100644
--- a/packages/styleUtils/layout/gridList/tests/__snapshots__/GridList.test.tsx.snap
+++ b/packages/styleUtils/layout/gridList/tests/__snapshots__/GridList.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`GridList renders default 1`] = `
 .emotion-0 {
   display: grid;
   grid-gap: 16px;
-  grid-template-columns: repeat(2,1fr);
+  grid-template-columns: repeat(2,minmax(0,1fr));
   list-style: none;
   margin-left: 0;
   margin-top: 0;
@@ -29,7 +29,7 @@ exports[`GridList renders with all props 1`] = `
 .emotion-0 {
   display: grid;
   grid-gap: 24px;
-  grid-template-columns: repeat(2,1fr);
+  grid-template-columns: repeat(2,minmax(0,1fr));
   list-style: none;
   margin-left: 0;
   margin-top: 0;