CSS：如何让溢出的网格项不影响定义的网格？

Question

考虑以下 4 列网格：

.container {
  width: 400px;
  height: 200px;
  position: relative;
}

.grid-columns {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 30px;
  z-index: -1;
}

.grid-column {
  background-color: #ddd;
}

.columns {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 30px;
}

.column {
  background-color: rgba(0, 0, 255, 0.5);
  grid-column-start: 3;
  grid-column-end: span 2;
}

<div class="container">
  <div class="columns">
    <div class="grid-columns">
      <div class="grid-column"></div>
      <div class="grid-column"></div>
      <div class="grid-column"></div>
      <div class="grid-column"></div>
    </div>
    <div class="column"></div>
  </div>
</div>

蓝色项目从第三个灰色区域开始，按预期占据最后两列。

但是，如果我们让它跨越 5 列而不是 2 列：

grid-column-end: span 5;

...添加了隐式轨道，并且蓝色项目不再从同一位置开始：

.container {
  width: 400px;
  height: 200px;
  position: relative;
}

.grid-columns {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 30px;
  z-index: -1;
}

.grid-column {
  background-color: #ddd;
}

.columns {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 30px;
}

.column {
  background-color: rgba(0, 0, 255, 0.5);
  grid-column-start: 3;
  grid-column-end: span 5;
}

<div class="container">
  <div class="columns">
    <div class="grid-columns">
      <div class="grid-column"></div>
      <div class="grid-column"></div>
      <div class="grid-column"></div>
      <div class="grid-column"></div>
    </div>
    <div class="column"></div>
  </div>
</div>

即使溢出网格，我如何强制蓝色项目从同一位置开始？

我认为将grid-auto-columns: 0 添加到网格中可以解决问题，但事实并非如此。

Answer 1

使用 percetange 定义宽度而不是指定列以避免创建隐式列。 100% 是一列的宽度，不要忘记考虑间隙：

.container {
  width: 400px;
  height: 200px;
  position: relative;
}

.grid-columns {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 30px;
  z-index: -1;
}

.grid-column {
  background-color: #ddd;
}

.columns {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 30px;
}

.column {
  background-color: rgba(0, 0, 255, 0.5);
  grid-column-start: 3;
  width:calc(5*100% + (5 - 1)*30px)
}

<div class="container">
  <div class="columns">
    <div class="grid-columns">
      <div class="grid-column"></div>
      <div class="grid-column"></div>
      <div class="grid-column"></div>
      <div class="grid-column"></div>
    </div>
    <div class="column"></div>
  </div>
</div>

使用 CSS 变量可以使语法更简单：

.container {
  width: 400px;
  height: 50px;
  position: relative;
  margin:10px;
}

.grid-columns {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 30px;
  z-index: -1;
}

.grid-column {
  background-color: #ddd;
}

.columns {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 30px;
}

.column {
  background-color: rgba(0, 0, 255, 0.5);
  grid-column-start: 3;
  width:calc(var(--n,1)*100% + (var(--n,1) - 1)*30px)
}

<div class="container">
  <div class="columns">
    <div class="grid-columns">
      <div class="grid-column"></div>
      <div class="grid-column"></div>
      <div class="grid-column"></div>
      <div class="grid-column"></div>
    </div>
    <div class="column"></div>
  </div>
</div>

<div class="container">
  <div class="columns">
    <div class="grid-columns">
      <div class="grid-column"></div>
      <div class="grid-column"></div>
      <div class="grid-column"></div>
      <div class="grid-column"></div>
    </div>
    <div class="column" style="--n:2"></div>
  </div>
</div>

<div class="container">
  <div class="columns">
    <div class="grid-columns">
      <div class="grid-column"></div>
      <div class="grid-column"></div>
      <div class="grid-column"></div>
      <div class="grid-column"></div>
    </div>
    <div class="column" style="--n:3"></div>
  </div>
</div>

<div class="container">
  <div class="columns">
    <div class="grid-columns">
      <div class="grid-column"></div>
      <div class="grid-column"></div>
      <div class="grid-column"></div>
      <div class="grid-column"></div>
    </div>
    <div class="column" style="--n:5"></div>
  </div>
</div>

如果您有固定值，另一个想法是使用像素值定义模板，然后您将能够使用grid-column-end: span X;

.container {
  width: 400px;
  height: 50px;
  position: relative;
  margin:10px;
}

.grid-columns {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-auto-columns: calc((100% - 3*30px) /4);
  grid-auto-flow: column;
  grid-column-gap: 30px;
  z-index: -1;
}

.grid-column {
  background-color: #ddd;
}

.columns {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-auto-columns: calc((100% - 3*30px) /4);
  grid-auto-flow: column;
  grid-column-gap: 30px;
}

.column {
  background-color: rgba(0, 0, 255, 0.5);
  grid-column-start: 3;
  grid-column-end: span var(--n);
}

<div class="container">
  <div class="columns">
    <div class="grid-columns">
      <div class="grid-column"></div>
      <div class="grid-column"></div>
      <div class="grid-column"></div>
      <div class="grid-column"></div>
    </div>
    <div class="column"></div>
  </div>
</div>

<div class="container">
  <div class="columns">
    <div class="grid-columns">
      <div class="grid-column"></div>
      <div class="grid-column"></div>
      <div class="grid-column"></div>
      <div class="grid-column"></div>
    </div>
    <div class="column" style="--n:2"></div>
  </div>
</div>

<div class="container">
  <div class="columns">
    <div class="grid-columns">
      <div class="grid-column"></div>
      <div class="grid-column"></div>
      <div class="grid-column"></div>
      <div class="grid-column"></div>
    </div>
    <div class="column" style="--n:3"></div>
  </div>
</div>

<div class="container">
  <div class="columns">
    <div class="grid-columns">
      <div class="grid-column"></div>
      <div class="grid-column"></div>
      <div class="grid-column"></div>
      <div class="grid-column"></div>
    </div>
    <div class="column" style="--n:5"></div>
  </div>
</div>