css 2列2行的水平溢出网格

bqucvtff 于 2023-04-08 发布在其他

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

我在尝试向网格添加水平溢出时遇到了一些问题。

我想我的网格的最后一个元素转到一个新列的右侧，整个网格溢出。新列将被隐藏，但通过向右滚动，我可以看到它。就像这个图像的例子：

下面是我的CSS代码：

.projects {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  overflow-x: auto;
}

有人知道我是怎么做到的吗？非常感谢你的帮助

css

来源：https://stackoverflow.com/questions/75961255/horizontal-overflow-grid-of-2-columns-and-2-rows

1条答案

按热度按时间

lx0bsm1f1#

您需要切换到列流并删除列模板：

.projects {
  display: grid;
  gap: 1rem;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, 1fr);
  grid-auto-columns: calc((100% - 1rem)/2); /* 2 columns visible */
  overflow-x: auto;
}

.projects div{
  border:2px solid;
  background: yellow;
  height: 100px;
}

<div class="projects ">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

赞(0）回复(0）举报 2023-04-08

我来回答

css 2列2行的水平溢出网格

1条答案

相关问题

热门标签

最新问答