CSS：如何让溢出的网格项不影响已定义的网格？ [英] CSS: How to let overflowing grid items not affect the defined grid?

问题描述

考虑以下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>

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

The blue item starts at the third grey area and occupies the last 2 columns as expected.

但是，如果我们将其跨5列而不是2列：

However, if we make it span 5 columns instead of 2:

grid-column-end: span 5;

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

...implicit tracks are added and the blue item doesn't start at the same place anymore:

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

我怎么能强制蓝色项即使在网格溢出的情况下也从同一位置开始？

How could I force the blue item to start at the same place even if it overflows the grid?

我认为添加 grid-auto-columns：0 可以达到目的，但不能成功。

I thought that adding grid-auto-columns: 0 to the grid would do the trick, but it doesn't.

推荐答案

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

Use percetange to define the width instead of specifing column to avoid creating implicit columns. 100% is the width of one column and don't forget to account for the gaps:

.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变量您可以简化语法：

With CSS variable you can make the syntax easier:

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

Another idea in case you will have fixed value is to define the template using pixel values and then you will be able to use 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>

这篇关于CSS：如何让溢出的网格项不影响已定义的网格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！