CSS网格：自动跨项目

j2cgzkjk 于 2023-01-27 发布在其他

关注(0)|答案(1)|浏览(179)

- bounty将在5天后过期**。回答此问题可获得+50的声誉奖励。Dill正在寻找来自声誉良好来源的答案：我很确定这是不可能的。我想去确定。

有没有办法让一个网格项自动跨越所有可用空间？
例如，这里的网格有两行和两列，第一行第二列是空闲的，所以我想跨越该项（就像我显式设置grid-column-end: 3时那样）。
但我不想计算跨度，而是让浏览器来做。

- 编辑：使问题更清楚**：容器只允许指定行数和列数。项目只允许指定row-和col-start，但不允许指定span和-end。因此，如果有一个row-start: i项，后面跟着一个row-start: i+1+n项，并且没有row-start: i+1+m项和m<n项，则row-start: i项应自动span n.

<div style="display: grid; gap: 5px;">
  <div style="
        background: red;
        grid-row-start: 1;
        grid-column-start: 1;
        /* how can I get rid of this */
        grid-column-end: 3;">1 1</div>
  <div style="
        background: red;
        grid-row-start: 2;
        grid-column-start: 1;">2 1</div>
  <div style="
        background: red;
        grid-row-start: 2;
        grid-column-start: 2;">2 2</div>
</div>

css

来源：https://stackoverflow.com/questions/75209437/css-grid-automatically-span-items

1条答案

按热度按时间

mm5n2pyu1#

我不知道这是否完全适合你，但一种方法是用span2和span1定义类。

.row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr auto;
}

.col1 {
  grid-column: auto / span 2;
}

.col2 {
  grid-column: auto / span 1;
}

<div class="row">
  <div class="col1" style="background-color: red">
    1 1
  </div>
</div>
<div class="row">
  <div class="col2" style="background-color: green">
    2 1
  </div>
  <div class="col2" style="background-color: blue">
    2 2
  </div>
</div>

赞(0）回复(0）举报 2023-01-27

我来回答

CSS网格：自动跨项目

1条答案

相关问题

热门标签

最新问答