具有固定跨度的框可填充整个列 [英] Boxes with fixed span to fill entire column

问题描述

我是CSS网格的初次用户：

I am a first time CSS-Grid user:

我想要实现的目标是拥有一个使用3列网格的灵活盒子系统，我可以只需添加1、2或3列大小的框即可；

What I try to achieve is to have a flexible box system using a 3-column grid to which I can simply add boxes of the size of 1, 2 or 3 columns; just using one class.

我试图通过执行 https://codepen.io/mathil/pen/WXarXB ：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 12px;
  width: 50%;
  margin-right: auto;
  margin-left: auto;
  background: grey;
}

.card-fullspan {
  grid-column: span 3;
}

.card-twothirdspan {
  grid-column: span 2;
}

.card-thirdspan {
  grid-column: span 1;
}

<div class="container">
  <div class="card-fullspan" style="background: red">Fullspan</div>
  <div class="card-twothirdspan" style="background:green">
    twothirdspan
  </div>
  <div class="card-thirdspan" style="background:green">
    thirdspan
  </div>
</div>

我知道我必须将其跨度为4，对于全跨度就是这样：

I know that I have to span it for 4, which would be this for the fullspan:

.card-fullspan {
  grid-column: span 4;
}

但是这当然不适用于其他两个，因为我不会能够结合其他方框得出的总和。右侧始终会有 12px 天沟。

But of course this does not work with the other two, since I wont be able to come to arrive at the sum of for with a combination of the other boxes. There will always be the 12px Gutter on the right side.

我知道可以为每个项目添加不同的类或ID，但这不是理想的解决方案。

I know that it's possible to just add a different class or id to each of the items, but that wouldn't be the ideal solution.

推荐答案

span 关键字计算后续网格线。

因此，在三列网格中，当您希望某项跨越整个行时，可以指定 span：3 ，而不是跨度：4 ，这会创建一个附加（隐式）列。

So in a three column grid, when you want an item to span the full row, you specify span: 3, not span: 4, which creates an additional (implicit) column.

您的代码：

.card-fullspan {
   grid-column: span 4;  /* spans across 4 columns */
}

请尝试以下操作：

.card-fullspan {
   grid-column: span 3; /* spans across 3 columns */
}

或此：

.card-fullspan {
   grid-column: 1 / 4; /* spans from grid-column-line 1 to 4 (3 columns) */
}

or this：

.card-fullspan {
   grid-column: 1 / -1; /* spans from grid-column-line 1 from the start side
                           to grid-column-line: 1 starting from the end side
                           (note: negative integers work only with explicit grids  */
}

所有详细信息均在本节的规范中：

All the details are in the spec in this section:

• https ：//www.w3.org/TR/css3-grid-layout/#line-placement

• https://www.w3.org/TR/css3-grid-layout/#line-placement

修订后的Codepen

这篇关于具有固定跨度的框可填充整个列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！