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项应用边距，并在容器上应用负边距，< / p>
将flex-grow: 1添加到所有 flex项，并将calc(n * var(--column) + 2 * var(--gutter))设置为跨越n列，

overalldata

clusterdata

限制max-width和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>

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

1 个答案: