html css更改某行中列的宽度[重复]答案

【问题标题】：html css change width of column in certain row [duplicate]html css更改某行中列的宽度[重复]
【发布时间】：2020-07-26 08:38:06
【问题描述】：

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

还有我的代码

#wrapper{
        display: grid;
        grid-template-columns: 25% 50% 25%;
        grid-gap: 20px;
        padding-right: 1%;
        grid-auto-rows: 1fr;
    }

div 命名相同

【问题讨论】：

标签： html css

【解决方案1】：

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

看这里的例子：https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas

【讨论】：

【解决方案2】：

你可以像这样添加grid-template-areas：

grid-template-areas: 
      "outline design accesibility" 
       "seo seo seo";

并将名称添加到每个容器：例如：grid-area: seo;

【讨论】：