如何使元素溢出网格宽度而不影响网格列的大小？答案

【问题标题】：How can I make an element overflow the grid width, widthout affecting grid cols sizes?如何使元素溢出网格宽度而不影响网格列的大小？
【发布时间】：2022-12-31 09:23:05
【问题描述】：

请参阅以下 sn-p。

我有一个带有重叠单元格的基本网格布局（但在这种情况下，重叠的东西并不重要）。我想做的是在 col-2 上插入一个 50vw 元素，它应该从屏幕的中心（当前 col-2 起点）开始并到达屏幕的末尾，溢出单元格本身.

如果我尝试这样做，它是行不通的。相反，它将修改所有单元格的当前大小。如何避免？

.grid{
  display:grid;
  //grid-template-columns: 6fr 2fr 4fr;
  grid-template-columns: 6fr 2fr minmax(0, 4fr);
  grid-template-rows: 1fr 4fr 1fr;
  min-width: 0;

  width: 60%;
  margin: 0 auto;
  background-color: rgba(255, 255, 0, .5);
}

.column{
  min-height: 100px;
}

.col-1{
  grid-column-start: 1;
  grid-column-end: 9;

  grid-row-start: 2;
  grid-row-end: 4;
  background-color: rgba(255, 0, 255, .5);

  z-index: 10;
}

.col-2{
  grid-column-start: 7;
  grid-column-end: 13;

  grid-row-start: 1;
  grid-row-end: 3;
  background-color: rgba(0, 255, 255, .5);
}

.inner{
  width: 50vw;
  background-color: rgba(0, 0, 200, .5);
}

<div class="grid">
  <div class="column col-1">col 1</div>
  <div class="column col-2">
    col 2<br>
    <!-- <div class="inner">inner</div> (should be 50vw) -->
  </div>
</div>

【问题讨论】：

首先删除模板中的逗号，我们只使用那里的空格
当使用 6fr 时，它并不意味着 6 列，而是只有 1 列，所以你有 3 列，但使用 13 作为列尾
这是一个 12 列的网格。这是一种保持相对宽度的方法。无论如何，这不是我的问题的重点。
它是这你的问题的重点。如果您正确定义了 12 列，那么您的代码将可以正常工作。实际上，您定义了 3 列并使用了 12 列，因此浏览器将根据其内容在逻辑上自动设置列的宽度，因为您没有定义它们的宽度
有趣的。我会试一试。

标签： css overflow css-grid overlap

【解决方案1】：

你是这个意思吗？

body, html{
  margin: 0;
}
.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr 4fr 1fr;
  min-width: 0;
  
  width: 100%;
  background-color: rgba(255, 255, 0, .5);
}

.column{
  min-height: 100px;
}

.col-1{
  grid-column-start: 1;
  grid-column-end: 9;
  
  grid-row-start: 2;
  grid-row-end: 4;
  background-color: rgba(255, 0, 255, .5);
  
  z-index: 10;
}

.col-2{
  grid-column-start: 7;
  grid-column-end: 13;
  
  grid-row-start: 1;
  grid-row-end: 3;
  background-color: rgba(0, 255, 255, .5);
}

.inner{
  width: 50vw;
  background-color: rgba(0, 0, 200, .5);
}

<div class="grid">
  <div class="column col-1">col 1</div>
  <div class="column col-2">
    <div class="inner">inner</div>
    col 2
  </div>
</div>

【讨论】：

【解决方案2】：

感谢@Temani Afif，我得到了我想要的：

请看下面的SN-P。我有一个带有重叠单元格的基本网格布局（但在这种情况下，重叠的东西并不重要）。我想做的是在 col-2 上插入一个 50vw 元素，它应该从屏幕的中心（当前 col-2 起点）开始并到达屏幕的末尾，溢出单元格本身.

如果我尝试这样做，它是行不通的。相反，它将修改所有单元格的当前大小。如何避免？

.grid{
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 1fr 4fr 1fr;
  
  width: 60%;
  margin: 0 auto;
  background-color: rgba(255, 255, 0, .5);
}

.column{
  min-height: 100px;
}

.col-1{
  grid-column-start: 1;
  grid-column-end: 9;
  
  grid-row-start: 2;
  grid-row-end: 4;
  background-color: rgba(255, 0, 255, .5);
  
  z-index: 10;
}

.col-2{
  grid-column-start: 7;
  grid-column-end: 13;
  
  grid-row-start: 1;
  grid-row-end: 3;
  background-color: rgba(0, 255, 255, .5);
}

.inner{
  width: 50vw;
  background-color: rgba(0, 0, 200, .5);
}

<div class="grid">
  <div class="column col-1">col 1</div>
  <div class="column col-2">
    col 2<br>
    <div class="inner">inner (50vw)</div>
  </div>
</div>

【讨论】：