css - 具有两行的可滚动网格

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>

标签： cssflexboxcss-grid

Answer 1

试试 justify-content: space-around;