html 网格使用动态列使列跨越整个行

xzabzqsa 于 5个月前发布在其他

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

我想实现的是让.row单元格始终停留在附加行上，并跨越整行，无论有多少列：
我用grid-column: 1 / -1技巧检查了this answer，但它似乎不适用于动态列的网格，有什么建议吗？

预期结果

的数据

.container {
  display: grid;
  grid-auto-flow: column dense;
  grid-template-rows: auto;
  gap: 8px;
}

.container > * {
  padding: 8px;
  border: solid 1px;
}

.container .big {
  grid-row: auto / span 2;
}

.container .row {
  grid-row: -1;
  grid-column: 1 / -1;
}

个字符

Html

来源：https://stackoverflow.com/questions/77716385/grid-make-a-column-span-entire-row-with-dynamic-columns

1条答案

按热度按时间

34gzjxbg1#

为什么你要使用display: grid;，你应该使用display:flex;，如果你这样做，那么你的问题将得到解决。我已经创建了一个例子来看看：

.container {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .container>* {
      flex: 1 1 auto;
      padding: 8px;
      box-sizing: border-box;
    }

    .container .row {
      flex-basis: 100%;
    }

    .container>div {
      border: 1px solid #000;
    }

个字符

赞(0）回复(0）举报 5个月前

我来回答

html 网格使用动态列使列跨越整个行

预期结果

1条答案

相关问题

热门标签

最新问答