如何使用CSS网格制作自动平衡内容列

Question

因此，这是我在过去20年中基本上迷恋的一种布局-具有能够在两列报纸样式之间自动流动的内容列表的功能。这些年来，有很多黑客，涉及后端或前端代码，但没有基于语义标记的CSS。

我刚刚开始涉足CSS网格，因为我认为浏览器支持已经足够了，但是即使使用了“迄今为止CSS最先进的网格系统”，我也无法弄清楚如何实现自己想要的功能。常被吹捧。

首先，我要从语义上分享到目前为止所做的事情，这是理想的标记：

body {
  font-family: sans-serif;
}

.two-col-grid {
  display: grid;
  grid-template-columns: [left] 1fr [right] 1fr;
}

<div class="two-col-grid">
  <section class="grid-item">
<h3 class="section-tree-title">
  <a href="/section1">Section 1</a>
</h3>

<ul class="article-list">
  <li class="article-list-item">
    <a href="/article1" class="article-list-link">Lorem ipsum dolor sit amet</a>
  </li>
  <li class="article-list-item">
    <a href="/article2" class="article-list-link">Consectetur adipiscing elit, sed do eiusmod</a>
  </li>
  <li class="article-list-item">
    <a href="/article3" class="article-list-link">Tempor incididunt ut labore et dolore magna aliqua</a>
  </li>
  <li class="article-list-item">
    <a href="/article4" class="article-list-link">Ut enim ad minim veniam</a>
  </li>
  <li class="article-list-item">
    <a href="/article6" class="article-list-link">Quis nostrud exercitation ullamco laboris nisi</a>
  </li>
  <li class="article-list-item">
    <a href="/article7" class="article-list-link">Ut aliquip ex ea commodo consequat</a>
  </li>
  <li class="article-list-item">
    <a href="/article8" class="article-list-link">Duis aute irure dolor in reprehenderit in voluptate</a>
  </li>
  <li class="article-list-item">
    <a href="/article9" class="article-list-link">Excepteur sint occaecat cupidatat non proident</a>
  </li>
  <li class="article-list-item">
    <a href="/article10" class="article-list-link">Sunt in culpa qui officia deserunt mollit anim</a>
  </li>
</ul>

<a href="/hc/en-us/sections/360002655674-Track-my-payment" class="see-all-articles">
  See all 21 articles
</a>
  </section>
  <section class="grid-item">
<h3 class="section-tree-title">
  <a href="/section2">Section 2</a>
</h3>

<ul class="article-list">
  <li class="article-list-item">
    <a href="/article1" class="article-list-link">Lorem ipsum dolor sit amet</a>
  </li>
  <li class="article-list-item">
    <a href="/article2" class="article-list-link">Consectetur adipiscing elit, sed do eiusmod</a>
  </li>
  <li class="article-list-item">
    <a href="/article3" class="article-list-link">Tempor incididunt ut labore et dolore magna aliqua</a>
  </li>
</ul>
  </section>
  <section class="grid-item">
<h3 class="section-tree-title">
  <a href="/section3">Section 3</a>
</h3>

<ul class="article-list">
  <li class="article-list-item">
    <a href="/article1" class="article-list-link">Lorem ipsum dolor sit amet</a>
  </li>
  <li class="article-list-item">
    <a href="/article2" class="article-list-link">Consectetur adipiscing elit, sed do eiusmod</a>
  </li>
  <li class="article-list-item">
    <a href="/article3" class="article-list-link">Tempor incididunt ut labore et dolore magna aliqua</a>
  </li>
  <li class="article-list-item">
    <a href="/article4" class="article-list-link">Ut enim ad minim veniam</a>
  </li>
</ul>
  </section>
  <section class="grid-item">
<h3 class="section-tree-title">
  <a href="/section4">Section 4</a>
</h3>

<ul class="article-list">
  <li class="article-list-item">
    <a href="/article1" class="article-list-link">Lorem ipsum dolor sit amet</a>
  </li>
  <li class="article-list-item">
    <a href="/article2" class="article-list-link">Consectetur adipiscing elit, sed do eiusmod</a>
  </li>
  <li class="article-list-item">
    <a href="/article3" class="article-list-link">Tempor incididunt ut labore et dolore magna aliqua</a>
  </li>
  <li class="article-list-item">
    <a href="/article4" class="article-list-link">Ut enim ad minim veniam</a>
  </li>
  <li class="article-list-item">
    <a href="/article6" class="article-list-link">Quis nostrud exercitation ullamco laboris nisi</a>
  </li>
  <li class="article-list-item">
    <a href="/article7" class="article-list-link">Ut aliquip ex ea commodo consequat</a>
  </li>
  <li class="article-list-item">
    <a href="/article8" class="article-list-link">Duis aute irure dolor in reprehenderit in voluptate</a>
  </li>
  <li class="article-list-item">
    <a href="/article9" class="article-list-link">Excepteur sint occaecat cupidatat non proident</a>
  </li>
</ul>
  </section>
  <section class="grid-item">
<h3 class="section-tree-title">
  <a href="/section5">Section 5</a>
</h3>

<ul class="article-list">
  <li class="article-list-item">
    <a href="/article1" class="article-list-link">Lorem ipsum dolor sit amet</a>
  </li>
  <li class="article-list-item">
    <a href="/article2" class="article-list-link">Consectetur adipiscing elit, sed do eiusmod</a>
  </li>
  <li class="article-list-item">
    <a href="/article3" class="article-list-link">Tempor incididunt ut labore et dolore magna aliqua</a>
  </li>
  <li class="article-list-item">
    <a href="/article4" class="article-list-link">Ut enim ad minim veniam</a>
  </li>
  <li class="article-list-item">
    <a href="/article6" class="article-list-link">Quis nostrud exercitation ullamco laboris nisi</a>
  </li>
  <li class="article-list-item">
    <a href="/article7" class="article-list-link">Ut aliquip ex ea commodo consequat</a>
  </li>
  <li class="article-list-item">
    <a href="/article8" class="article-list-link">Duis aute irure dolor in reprehenderit in voluptate</a>
  </li>
</ul>
  </section>
</div>

由于我只定义了两列，所以我希望那样简单。但是，内容在需要包装的行中流动，每次包装都会创建我未定义的隐式网格行。基本上，这是我可以使用Flexbox轻松创建的东西，我认为CSS Grids应该提供更多的控件。

总而言之，我的代码执行此操作：

但是我要它做的是这个：

Answer 1

您可以使用column-counter属性（或使用flexbox）到达它：

body {
  font-family: sans-serif;
}

.two-col-grid {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
  -moz-column-gap: 10px;
  -webkit-column-gap: 10px;
  column-gap: 10px;
}

.grid-item {
  width: 100%;
  display: inline-block;
  box-sizing: border-box;
}

<div class="two-col-grid">
  <section class="grid-item">
<h3 class="section-tree-title">
  <a href="/section1">Section 1</a>
</h3>

<ul class="article-list">
  <li class="article-list-item">
    <a href="/article1" class="article-list-link">Lorem ipsum dolor sit amet</a>
  </li>
  <li class="article-list-item">
    <a href="/article2" class="article-list-link">Consectetur adipiscing elit, sed do eiusmod</a>
  </li>
  <li class="article-list-item">
    <a href="/article3" class="article-list-link">Tempor incididunt ut labore et dolore magna aliqua</a>
  </li>
  <li class="article-list-item">
    <a href="/article4" class="article-list-link">Ut enim ad minim veniam</a>
  </li>
  <li class="article-list-item">
    <a href="/article6" class="article-list-link">Quis nostrud exercitation ullamco laboris nisi</a>
  </li>
  <li class="article-list-item">
    <a href="/article7" class="article-list-link">Ut aliquip ex ea commodo consequat</a>
  </li>
  <li class="article-list-item">
    <a href="/article8" class="article-list-link">Duis aute irure dolor in reprehenderit in voluptate</a>
  </li>
  <li class="article-list-item">
    <a href="/article9" class="article-list-link">Excepteur sint occaecat cupidatat non proident</a>
  </li>
  <li class="article-list-item">
    <a href="/article10" class="article-list-link">Sunt in culpa qui officia deserunt mollit anim</a>
  </li>
</ul>

<a href="/hc/en-us/sections/360002655674-Track-my-payment" class="see-all-articles">
  See all 21 articles
</a>
  </section>
  <section class="grid-item">
<h3 class="section-tree-title">
  <a href="/section2">Section 2</a>
</h3>

<ul class="article-list">
  <li class="article-list-item">
    <a href="/article1" class="article-list-link">Lorem ipsum dolor sit amet</a>
  </li>
  <li class="article-list-item">
    <a href="/article2" class="article-list-link">Consectetur adipiscing elit, sed do eiusmod</a>
  </li>
  <li class="article-list-item">
    <a href="/article3" class="article-list-link">Tempor incididunt ut labore et dolore magna aliqua</a>
  </li>
</ul>
  </section>
  <section class="grid-item">
<h3 class="section-tree-title">
  <a href="/section3">Section 3</a>
</h3>

<ul class="article-list">
  <li class="article-list-item">
    <a href="/article1" class="article-list-link">Lorem ipsum dolor sit amet</a>
  </li>
  <li class="article-list-item">
    <a href="/article2" class="article-list-link">Consectetur adipiscing elit, sed do eiusmod</a>
  </li>
  <li class="article-list-item">
    <a href="/article3" class="article-list-link">Tempor incididunt ut labore et dolore magna aliqua</a>
  </li>
  <li class="article-list-item">
    <a href="/article4" class="article-list-link">Ut enim ad minim veniam</a>
  </li>
</ul>
  </section>
  <section class="grid-item">
<h3 class="section-tree-title">
  <a href="/section4">Section 4</a>
</h3>

<ul class="article-list">
  <li class="article-list-item">
    <a href="/article1" class="article-list-link">Lorem ipsum dolor sit amet</a>
  </li>
  <li class="article-list-item">
    <a href="/article2" class="article-list-link">Consectetur adipiscing elit, sed do eiusmod</a>
  </li>
  <li class="article-list-item">
    <a href="/article3" class="article-list-link">Tempor incididunt ut labore et dolore magna aliqua</a>
  </li>
  <li class="article-list-item">
    <a href="/article4" class="article-list-link">Ut enim ad minim veniam</a>
  </li>
  <li class="article-list-item">
    <a href="/article6" class="article-list-link">Quis nostrud exercitation ullamco laboris nisi</a>
  </li>
  <li class="article-list-item">
    <a href="/article7" class="article-list-link">Ut aliquip ex ea commodo consequat</a>
  </li>
  <li class="article-list-item">
    <a href="/article8" class="article-list-link">Duis aute irure dolor in reprehenderit in voluptate</a>
  </li>
  <li class="article-list-item">
    <a href="/article9" class="article-list-link">Excepteur sint occaecat cupidatat non proident</a>
  </li>
</ul>
  </section>
  <section class="grid-item">
<h3 class="section-tree-title">
  <a href="/section5">Section 5</a>
</h3>

<ul class="article-list">
  <li class="article-list-item">
    <a href="/article1" class="article-list-link">Lorem ipsum dolor sit amet</a>
  </li>
  <li class="article-list-item">
    <a href="/article2" class="article-list-link">Consectetur adipiscing elit, sed do eiusmod</a>
  </li>
  <li class="article-list-item">
    <a href="/article3" class="article-list-link">Tempor incididunt ut labore et dolore magna aliqua</a>
  </li>
  <li class="article-list-item">
    <a href="/article4" class="article-list-link">Ut enim ad minim veniam</a>
  </li>
  <li class="article-list-item">
    <a href="/article6" class="article-list-link">Quis nostrud exercitation ullamco laboris nisi</a>
  </li>
  <li class="article-list-item">
    <a href="/article7" class="article-list-link">Ut aliquip ex ea commodo consequat</a>
  </li>
  <li class="article-list-item">
    <a href="/article8" class="article-list-link">Duis aute irure dolor in reprehenderit in voluptate</a>
  </li>
</ul>
  </section>
</div>