可滚动的两行网格

Question

我有一个两行多列的css网格。我想"把内容粘在一起"。

通过这种方式，网格创建如下大小相等的列:

显示网格

但是我想实现一种方式，其中列是独立的，内容是"粘合"的，如下面的例子所示。

你知道怎么做吗?

.container {
display: grid;
gap: 4px;
grid-template-rows: auto auto;
grid-auto-flow: column;
overflow-x: scroll;
}
.items {
width: max-content;
white-space: nowrap;
background-color: #F3F4F6;
padding: 4px;
}

<div class="container">
<div class="items">Some text here</div>
<div class="items">Another text</div>
<div class="items">More text</div>
<div class="items">Text here</div>
<div class="items">Something</div>
<div class="items">Other thing here</div>
<div class="items">Here is other</div>
<div class="items">More text again</div>
<div class="items">Text really here</div>
<div class="items">Yes, text</div>
<div class="items">Texting</div>
<div class="items">Some text</div>
<div class="items">Text content</div>
<div class="items">Text will be here</div>
<div class="items">Another text here</div>
<div class="items">Other text</div>
<div class="items">More text again</div>
<div class="items">One more text</div>
<div class="items">Just a text</div>
<div class="items">The last text</div>
</div>

Answer 1

试一试