Question

想象一下，我们有 2个CSS网格容器，动态列数基于宽度计算。

display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

网格工作得很好，但如果我们需要另一个网格使第一列与上面显示的代码在另一个网格中相同，但是它是另一个跨越更多单元格的列 - 取决于当前行中有多少个单元格。

为了更好地理解问题，有图片：

更狭窄的包装器：

我们需要应用grid-column: span ALL 之类的东西（如果存在这样的东西），意思是ALL =直到当前行的结尾。

真正重要的是＆＃34; First＆＃34;列应始终与＆＃34; 1＆＃34;列。

运行示例的代码在这里：

＆＃13;

.grid div {
  /* Not important fancy styles */
  height: 40px;
  text-align: center;
  padding-top: 20px;
}

.grid {
  width: 350px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  background-color: silver;
}

.grid-second {
  background-color: red;
}

.grid-another {
  background-color: purple;
  border: 1px solid gray;
}

＆＃13;

<div class="grid">
  <div class="grid-first">
    First
  </div>
  <div class="grid-second">
    Second (Want till end)
  </div>
</div>
<!-- Another same grid -->
<div class="grid">
  <div class="grid-another">
    1
  </div>
  <div class="grid-another">
    2
  </div>
  <div class="grid-another">
    3
  </div>
  <div class="grid-another">
    4
  </div>
</div>

＆＃13;

PS。请不要使用媒体查询发布解决方案。我对任何（即使是很小的hacky解决方案）感兴趣，它可以在不使用媒体查询的情况下工作。

Answer 1

CSS Grid规范中有两个有趣的部分：

7.1. The Explicit Grid

网格放置属性中的数字索引从边缘开始计算   显式网格。正指数从开始计算，   负面指数从末端算起。

也在这里......

8.3. Line-based Placement: the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties

如果给出一个负整数，则反而计数，开始   从显式网格的结束边缘开始。

换句话说，在处理显式网格时，这意味着由这些属性定义的网格：

grid-template-rows
grid-template-columns
grid-template-areas
grid（这是上述三个属性的简写，among others）

...您可以通过设置此规则使网格区域跨越所有列：

grid-column: 1 / -1;

告诉网格区域从第一列线到最后一列线，我相信这符合您的既定目标：

“我们需要应用grid-column: span ALL之类的东西（如果存在类似的东西），意味着ALL =直到当前行的结尾。”

jsFiddle demo

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  background-color: silver;
}

.grid-second {
  grid-column: 2 / -1;
  background-color: red;
}


/* Not important fancy styles */

.grid div {
  height: 40px;
  text-align: center;
  padding-top: 20px;
}

.grid-another {
  background-color: purple;
  border: 1px solid gray;
}

<div class="grid">
  <div class="grid-first">First</div>
  <div class="grid-second">Second (Want till end)</div>
</div>
<!-- Another same grid -->
<div class="grid">
  <div class="grid-another">1</div>
  <div class="grid-another">2</div>
  <div class="grid-another">3</div>
  <div class="grid-another">4</div>
  <div class="grid-another">1</div>
  <div class="grid-another">2</div>
  <div class="grid-another">3</div>
  <div class="grid-another">4</div>
  <div class="grid-another">1</div>
  <div class="grid-another">2</div>
  <div class="grid-another">3</div>
  <div class="grid-another">4</div>
</div>

使网格列跨越整行

1 个答案:

jsFiddle demo