如何更改隐式行上的网格列大小？答案

【问题标题】：How to change grid columns size on implicit row?如何更改隐式行上的网格列大小？
【发布时间】：2021-10-31 18:05:40
【问题描述】：

我很有趣如何更改隐式行上的网格列。我不会复制我正在编写的代码，但我会创建一个小示例并解释我的意思。

<div class='container'>
 <p>item-1</p>
 <p>item-2</p>
 <p>item-3</p>
 <p>item-4</p>
 <p>item-5</p>
 <p>item-6</p>
</div>



.container {
  display: grid;
  grid-template-columns: 2fr 3fr;
}

好的，事情就是这样。我们有 6 个网格项目。我们在容器中指定我们想要有 2 列，并且由于我们有 6 个项目，它将隐式创建 3 个网格行。

现在，每个奇数项将填充第一列，即 2fr，每个偶数项将填充第二个，即 3fr 列。

假设我想在第二行 3fr 中制作第一列，在第二行 2fr 中制作第二列。基本上我希望我的项目 3 在 3fr 列中，但我不想更改订单（我的意思是我不想将项目 3 转移到第二行的第二列）。

简单地说，我想将第二行的第一列的宽度更改为 3fr，将第二行的第二列的宽度更改为 3fr，而不用接触带有容器类的 div 中的任何内容。

【问题讨论】：

标签： css css-grid

【解决方案1】：

基本上，一旦设置了行/列大小，就无法更改。

您可以做的是定义网格，使项目可以跨越多列。

因此，不要使用 5fr 宽的容器，而是定义一个 10 列，每列 1fr 的容器，然后指定单个子项将跨越多少列。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

.container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 1em;
  margin: 1em;
}

p {
  border: 1px solid grey;
}

p {
  grid-column: span 4
}

p:nth-child(2) {
  grid-column: span 6;
}

p:nth-child(3) {
  grid-column: span 6;
}

<div class='container'>
  <p>item-1</p>
  <p>item-2</p>
  <p>item-3</p>
  <p>item-4</p>
  <p>item-5</p>
  <p>item-6</p>
</div>

【讨论】：