css - 使网格列高适合自己的内容

Question

我得到了这个网格模板。我对网格列的高度有疑问。由于文本，第一列是 547 高度，之后的其他列也是如此。我不想要这个。我怎样才能使高度成为它的内容？这是我第二列的图像，你可以看到有很多空白空间，因为第一列的高度是 547px

    .main-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        gap: 10px;
        grid-template-areas:
            "Box"
            "Box-1"
            "Box-2"
            "Box-3";
    }

标签： csscss-grid