使用CSS，如何创建具有相同宽度列的两列网格；仅限按要求的窄尺寸；？

假设我有一段HTML，其结构如下：

<!-- MY ACTUAL HTML -->

<div class="linkgrid">
  <div class="gridentry">
    <a href="#">Loooooooooooooong</a>
  </div>
  <div class="gridentry">
    <a href="#">Short</a>
  </div>
  <div class="gridentry">
    <a href="#">Meeeedium</a>
  </div>
</div>

---

在花了相当长的时间摆弄这个问题并得到解决后，我终于找到了一个解决方案：

.linkgrid{
最大宽度：50%；
显示：表格；
}
.gridentry:第n个子项（奇数）{
浮动：左；
宽度：100%；
}
.gridentry:第n个子项（偶数）{
宽度：100%；
左边距：100%；
保证金权利：-100%；
}
.gridentry:第n个子项（偶数）：之后{
内容：''；
显示：块；
清除：左；
}
.gridentry>*{
显示：块；
边缘底部：10px；
填充：10px；
背景色：红色；
文本对齐：居中；
/*如果文本太长，无法“自然”地打断它们，这会很有帮助：*/
/*单词break：打破一切*/
}
.gridentry:第n个子项（奇数）>*{
右边距：5px；
}
.gridentry:第n个孩子（偶数）>*{
左边距：5px；
}
.gridentry a{
颜色：白色；
}

---

由于CSS网格得到了更多的支持，现在才重新讨论这个问题。CSS网格的一个解决方案是：

.linkgrid{
显示：内联网格；
网格模板列：重复（2，1fr）；
柱间距：10px；
行间距：10px；
}
.gridentry>*{
显示：块；
填充：10px；
文本对齐：居中；
背景色：红色；
颜色：白色；
/*如果文本太长，无法“自然”地打断它们，这会很有帮助：*/
/*单词break：打破一切*/
}

一种解决方案是使用JavaScript在每对条目周围插入表行（好吧，作为表行），我认为这是不可能的。这是我能想到的最接近的方法，但你可以从我的笔记中看到它正在崩溃：我能想到的最好（也许更糟）的方法是flexbox方法看起来很有希望！但是，如果loooong内容变得非常loooong，它就会停止正常工作。@GCyrillus-看起来它遇到了与我的方法相同的问题-添加更多的单元格，网格会不断变宽。这就好像浏览器无法跟上50%的计算速度：这种表格、浮动和边距的组合看起来太粗糙了，但我喜欢它！