如何调整Grid单元格尺寸以更好适配内部内容？

网格单元格内的内容无法适配单元格尺寸，我正在尝试调整网格单元格的尺寸，以更好地适配内部内容。

负责该网格的代码如下：

main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(589.19px, 1fr));
    overflow-x: hidden;
    justify-items: center;
    align-items: center;
}

内容的提问来源于stack exchange，提问作者alessi.gg