使网格列跨越整行

Question

想象一下,我们有2个CSS Grid容器,其动态列数基于宽度计算.

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

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

为了更好地理解问题,有图像:

在更窄的包装上:

我们需要应用类似的东西grid-column: span ALL (如果存在这样的东西),意味着ALL =直到当前行的结尾.

真正重要的是"First"列应始终与"1"列对齐.

代码运行示例如下:

.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;
}

<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>

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

Answer 1

以下是CSS Grid规范中的两个有趣部分:

7.1.显式网格

网格放置属性中的数字索引从显式网格的边缘开始计算.正指数从起始侧开始计数,而负指数从末端开始计算.

也在这里...

8.3.基于行的展示位置:grid-row-start,grid-column-start, grid-row-end,和grid-column-end性质

如果给出负整数,则从显式网格的结束边缘开始反向计数.

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

• grid-template-rows
• grid-template-columns
• grid-template-areas

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

grid-column: 1 / -1;

这告诉网格区域从第一列线到最后一列线,我认为这符合您的既定目标:

"我们需要应用类似的东西grid(如果存在类似的东西),意味着ALL =直到当前行的结尾."

jsFiddle演示

.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>