是。

Question

我需要能够动态分配一项将在网格行中占据的列数。

在flex中，我可以做一些类似的事情，给它起一个.col-sm-25之类的名字（我知道是有想象力的），并给它一个flex-basis: 25%的样式。但是，flex没有grid-gap属性，所以我试图看看是否有办法在CSS网格中做到这一点。

由于它是由我们的CMS系统中的编辑器动态创建的，他们无法选择要向其中添加项目的容器，因此grid-template-columns只能是repeat(12, 1fr)或类似的东西。

我是否可以说项.col-sm-25占据网格行中的下4个可用列？我不知道这些物品将以什么顺序进入，所以不能说grid-column-start是什么。

我在flebox中知道can be done，但感觉很hacky

Answer 1

有没有办法说说.col-sm-25占据网格行中的下4个可用列？

是。

只需将grid-column-end定义为span 4

Grid-column-end @ MDN

span n

为该网格项目的位置分配一个网格跨度，以使该网格项目的网格区域的列结束边缘距起始边缘为n行。

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.box {
  border: 1px solid green;
  height: 50px;
}

.span-2 {
  grid-column-end: span 2;
  background: green;
}

.span-3 {
  grid-column-end: span 3;
  background: lightblue;
}

.span-4 {
  grid-column-end: span 4;
  background: lightgreen;
}

<div class="grid">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box span-4"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box span-4"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box span-2"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box span-3"></div>
  <div class="box"></div>
  <div class="box span-4"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

请注意，如图所示，这可能导致网格的“损坏”，其中该行的左少于四列。

但是，css-grid可以使用grid-auto-flow:dense;

回填

CSS网格动态分配网格列或网格模板列

1 个答案:

是。