結論
grid-template-columns: repeat(3,minmax(0, 1fr));と記述すること。
なぜ子要素がはみ出してしまうのか？
minmax を使わずに 1fr を指定すると、
grid-template-columns: repeat(3, minmax(min-content, 1fr));と同じ挙動になる。
このとき minmax() の性質上、max < min の値が小さい場合には、max は自動的に min の値まで下限され、結果的に max = min になります。
つまり、幅が150pxの親ブロックに対してrepeat(3, minmax(min-content, 1fr)) を指定すると、
各グリッドには min-content < 50px が適用されます。
ここで、中のテキスト量が多くなると、min の値（最小幅）が max（= 1fr）を超えてしまい、
結果として要素が意図せずはみ出してしまうことになります。
参考サイト