html css更改特定行中列的宽度

Question

我目前有一个包含 4 个 div 的包装器，我想将其中的 3 个堆叠成一行，而不是在下一行和整个空间中放置第四个，我正在努力获取填充其余部分的大小，我正在使用媒体标签，所以我可能需要重置一些东西，这里是屏幕截图和我的代码

和我的代码

#wrapper{

        display: grid;

        grid-template-columns: 25% 50% 25%;

        grid-gap: 20px;

        padding-right: 1%;

        grid-auto-rows: 1fr;

    }

div 的名称相同

Answer 1

您可以按照前面所述创建grid-template-areas。或者，每一行可以是更大“容器”内自己的网格。网格。基本上是网格中的网格。如果您的列间距逐行更改，这可能会提供更大的灵活性。

Answer 2

您可以添加grid-template-areas，如下所示：grid-template-areas:        "outline design accesibility"         "seo seo seo";并将名称添加到每个容器：例如： grid-area: seo;