使网格列跨越整个行 [英] Make a grid column span the entire row

问题描述

想象一下，我们有 2个CSS网格容器，它们具有基于宽度的动态列数.

Imagine we have 2 CSS Grid containers with dynamic columns count based on width.

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

该网格可以正常工作，但是如果我们需要另一个网格来使第一列与具有上面显示代码的另一个网格相同，那又是跨越更多单元格的另一列-取决于多少个单元格该怎么办?在当前行中.

The grid works perfectly, but what if we need to have another grid to have the 1st column to be same as in another grid with the code shown above, but it's another column to span through more cells - depending on how many cells are in the current row.

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

To better understand issue, there are images:

在较窄的包装纸上:

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

We would need to apply something like grid-column: span ALL (if something like that exists), with meaning that ALL = till the end of current row.

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

What is really important is that "First" column should always align with "1" column.

运行示例代码在这里:

.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.请请勿使用媒体查询发布解决方案.我对任何一种(甚至是一点点骇人听闻的解决方案)都感兴趣，这些解决方案无需使用媒体查询就可以正常工作.

PS. please do not post solutions using media query. I am interested in any (even little hacky solution), which will work without usage of media queries.

推荐答案

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

Here are two interesting sections in the CSS Grid specification:

7.1.显式网格

网格放置属性中的数字索引从边缘开始计数 显式网格.正索引从开始算起， 而负数则从末尾开始计数.

Numeric indexes in the grid-placement properties count from the edges of the explicit grid. Positive indexes count from the start side, while negative indexes count from the end side.

也在这里...

8.3.基于行的放置:grid-row-start，grid-column-start，grid-row-end和grid-column-end属性

如果给定一个负整数，则从相反开始算起 从显式网格的末端边缘开始.

If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.

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

In other words, when dealing with an explicit grid, which means a grid defined by these properties:

• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid(这是上面三个属性的简写，其他内容)

• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid (which is the shorthand for the three properties above, among others)

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

... you can make a grid area span all columns by setting this rule:

grid-column: 1 / -1;

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

That tells the grid area to span from the first column line to the last column line, which I believe meets your stated objective:

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

"We would need to apply something like grid-column: span ALL (if something like that exists), with meaning that ALL = till the end of current row."

jsFiddle演示

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>

这篇关于使网格列跨越整个行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！