html - CSS 网格最小跨度 3，如果类对象只是网格行中的对象，则填充行中的所有网格元素

Question

我正在使用 CSS 网格来设计我的 Web 应用程序。我想定义一个类必须具有 3 帧的最小 grid-column 跨度并且应该跨越整个网格行，如果相应的类对象是相应的唯一一个(在这种情况下最后行)。

网格定义

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, auto));
  grid-template-rows: 1fr min-content;
  grid-gap: 50px;

}

各自的定义

.overalldata {
  grid-column: auto / span 3;
}

.clustergraph {
  grid-column: auto / span 6;
  justify-items: center;
}

.userinfoboard {
  grid-column: auto / span 3;
  justify-items: center;
  align-self: center;;
}

我的全宽浏览器允许 19 列。如果我缩小窗口，只允许 11 列，userinfoboard 类对象应该跨越窗口的整个宽度，因为它是其网格行中的唯一对象。

我怎样才能做到这一点？

我尝试了 question that seems close to my issue 的答案，但它缺少 PSEUDO: min-span: span 3 的特征:

.userinfoboard {
  grid-column: 1 / -1;
  justify-items: center;
  align-self: center;;
}

非常感谢!

Answer 1

您可以通过操作 flex-basis 和 max-width 来使用 flexbox(还要考虑元素之间的间距):

• 要创建一个网格间隙，您可以对 flex 元素应用边距，并在容器上应用负边距，

• 将 flex-grow: 1 添加到所有 flex 元素 并设置 calc(n * var(--column) + 2 * var( --gutter)) 跨越 n 列，

• 通过指定一个与 flex-basis.

您可以看到 userinfoboard 现在将至少跨越三列 - 请参见下面的演示:

.wrapper {
  overflow: hidden;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  --column: 100px; /* size of one column */
  --gutter: 20px; /* size of gap between columns */
  margin: -10px; /* remove space between container and items */
}

.grid > * {
  background: lightblue;
  border: 1px solid cadetblue;
  height: 50px;
  margin: 10px;
  flex-grow: 1; /* grow items */
}

.overalldata { /* span three columns */
  flex-basis: calc(3 * var(--column) + 2 * var(--gutter));
  max-width: calc(3 * var(--column) + 2 * var(--gutter));
}

.clustergraph { /* span six columns */
  flex-basis: calc(6 * var(--column) + 5 * var(--gutter));
  max-width: calc(6 * var(--column) + 5 * var(--gutter));
}

.userinfoboard { /* span miniumum three columns */
  background: beige;
  flex-basis: calc(3 * var(--column));
}

<div class="wrapper">
  <div class="grid">
    <div class="overalldata"></div>
    <div class="userinfoboard"></div>
    <div class="clustergraph"></div>
    <div class="overalldata"></div>
    <div class="userinfoboard"></div>
    <div class="clustergraph"></div>
    <div class="userinfoboard"></div>
  </div>
</div>