使网格列跨越整行

2022-01-18 00:00:00 grid css css-grid

假设我们有 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.

运行示例的代码在这里:

Code to run example is here:

.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(这是上面三个属性的简写，等等)
  • 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 = 直到当前行的末尾."em>

"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 演示

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

相关文章