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

这是我在过去20年里一直渴望的一种布局——能够有一个内容列表，在报纸风格的两个专栏之间自动流动。多年来，有很多黑客攻击，涉及后端或前端代码，但没有基于语义标记的CSS

我刚刚开始深入研究CSS网格，因为我觉得浏览器支持终于足够了，但我不知道如何实现我想要的，即使是像人们经常吹嘘的那样使用“CSS有史以来最先进的网格系统”

首先，让我分享我迄今为止所做的工作，从语义上讲，这是理想的标记：

正文{
字体系列：无衬线；
}
.两列网格{
显示：网格；
网格模板列：[左]1fr[右]1fr；
}

您可以使用列计数器属性（或使用flexbox）访问它：

正文{
字体系列：无衬线；
}
.两列网格{
-moz列数：2；
-webkit列数：2；
列数：2；
-moz柱间距：10px；
-webkit柱间隙：10px；
柱间距：10px；
}
.表格项目{
宽度：100%；
显示：内联块；
框大小：边框框；
}

仅尝试css列

正文{
字体系列：无衬线；
}
.两列网格{
栏目：2个；
}