CSS Grid gutter导致列溢出，如何强制列宽符合

Posted 2023-03-06

【中文标题】CSS Grid gutter导致列溢出，如何强制列宽符合

【英文标题】：CSS Grid gutter is causing columns to overflow, how do I force the column width to conform

【发布时间】：2020-04-15 15:16:04

【问题描述】：

我正在尝试创建一个相当简单的 12 列 CSS 网格框架并允许网格嵌套。

.grid 
    grid-template-columns: repeat($grid-column-count, minmax(0, 1fr));
    column-gap: 2rem;

我目前遇到一个问题，即在增加装订线宽度时，无论其中包含什么内容，小数列都会被推出嵌套网格容器。

我尝试在声明列时将 minmax 值设置为 0，但它仍然坚持扩展。我知道这是因为排水沟的宽度加起来超过了内容，但是有没有办法在不使用溢出属性的情况下强制它下降？

列正在被装订线和/或内容推送：

...当列应该容纳排水沟时：

Codepen

html 
  box-sizing: border-box;


*,
*:before,
*:after 
  box-sizing: inherit;


.container 
  display: grid;
  grid-template-columns: [left-gutter-start] auto [left-gutter-end] minmax(0, 960px) [main-content-end] auto [right-gutter-end];
  overflow-wrap: break-word;


.container>.grid 
  grid-column-start: left-gutter-end;
  grid-column-end: main-content-end;


.container>.grid.grid-breakout 
  grid-column-start: left-gutter-start;
  grid-column-end: right-gutter-end;


.grid 
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  -webkit-column-gap: 2rem;
  column-gap: 2rem;
  grid-column-end: span 12;


.grid .grid 
  -webkit-column-gap: 2rem;
  column-gap: 2rem;


.grid .col-1 
  grid-column-end: span 1;


.grid .col-2 
  grid-column-end: span 2;


.grid .col-3 
  grid-column-end: span 3;


.grid .col-4 
  grid-column-end: span 4;


.grid .col-5 
  grid-column-end: span 5;


.grid .col-6 
  grid-column-end: span 6;


.grid .col-7 
  grid-column-end: span 7;


.grid .col-8 
  grid-column-end: span 8;


.grid .col-9 
  grid-column-end: span 9;


.grid .col-10 
  grid-column-end: span 10;


.grid .col-11 
  grid-column-end: span 11;


.grid .col-12 
  grid-column-end: span 12;


.grid .col-end 
  grid-column-end: -1;


.grid .colstart-start 
  grid-column-start: 1;


.grid .colstart-2 
  grid-column-start: 3;


.grid .colstart-3 
  grid-column-start: 4;


.grid .colstart-4 
  grid-column-start: 5;


.grid .colstart-5 
  grid-column-start: 6;


.grid .colstart-6 
  grid-column-start: 7;


.grid .colstart-7 
  grid-column-start: 8;


.grid .colstart-8 
  grid-column-start: 9;


.grid .colstart-9 
  grid-column-start: 10;


.grid .colstart-10 
  grid-column-start: 11;


div[class*="col-"] 
  text-align: left;
  background-color: orange;
  font-size: 12px;
  font-family: sans-serif;


div[class*="col-"]:before 
  content: attr(class);
  display: inline-block;
  margin: 4px;


.container[class*="col-"]:before 
  display: none;


div[class*="col-"] div[class*="col-"] 
  background: lightgreen;


div[class*="col-"] div[class*="col-"]:after 
  content: " (nested)";
  display: inline-block;
  margin: 4px;


.grid 
  row-gap: 1rem;


.grid .grid 
  background: green;


.grid-breakout 
  background: red;


.container 
  -webkit-column-gap: 1rem;
  column-gap: 1rem;
  row-gap: 1rem;
  margin-bottom: 1rem;

<div class="container">
  <div class="grid">

    <div class="col-4"></div>
    <div class="col-4">
      <div class="grid">
        <div class="col-12"></div>
        <div class="col-3"></div>
        <div class="col-9"></div>
        <div class="col-2"></div>
        <div class="col-10"></div>
        <div class="col-1"></div>
        <div class="col-11"></div>
      </div>
    </div>
    <div class="col-4"></div>
    <div class="col-4"></div>
  </div>

  <div class="grid">
    <div class="col-6">
      <p>This is what I would want to happen...</p>
      <div class="grid">
        <div class="col-12"></div>
        <div class="col-3"></div>
        <div class="col-9"></div>
        <div class="col-2"></div>
        <div class="col-10"></div>
        <div class="col-1"></div>
        <div class="col-11"></div>
      </div>
    </div>
    <div class="col-6">
      <div class="grid">
        <div class="col-4"></div>
        <div class="col-8"></div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

你解决了吗？

【参考方案1】：

简短回答。

请记住，对于任何给定的网格，即使列没有内容，您也不应该将 gaps 乘以列的大小大于容器网格。

换句话说：gap * columns(0width) < gridWidth 否则会溢出。

例如，尝试将内部网格的间隙从 2rem 减少到 1rem，这样您的示例就可以工作了

【参考方案2】：

.main 
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(12, 1fr);
    margin: 0 auto;
    width: 100%;
    max-width: 1280px;


.one, .two, .three, .four, .five, .six,
.seven, .eight, .nine, .ten, .eleven, .twelve 
    grid-column-end: span 12;


.nested 
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(12, 1fr);


.merge-two-rows  grid-row-end: span 2 
.merge-three-rows  grid-row-end: span 3 
.merge-four-rows  grid-row-end: span 4 
.merge-five-rows  grid-row-end: span 5 
.merge-six-rows  grid-row-end: span 6 

@media only screen and (min-width: 481px) 
    .one  grid-column-end: span 1 
    .two  grid-column-end: span 2 
    .three  grid-column-end: span 3 
    .four  grid-column-end: span 4 
    .five  grid-column-end: span 5 
    .six  grid-column-end: span 6 
    .seven  grid-column-end: span 7 
    .eight  grid-column-end: span 8 
    .nine  grid-column-end: span 9 
    .ten  grid-column-end: span 10 
    .eleven  grid-column-end: span 11 

资源：Smart 12 Column Grid with Nesting

【讨论】：

谢谢，这很有趣，但它也有同样的问题，如果你能解释如何实现这一点会有所帮助吗？