css - 使用 CSS，如何创建具有等宽列的两列网格 "only as narrow as required"？

Question

假设我有一段 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>

...我想利用 CSS 获得如下所示的演示文稿:

/* DEMONSTRATION-ONLY CSS */

table {
  table-layout: fixed;
}

td {
  width: 50%;
  padding: 1em;

  background-color: red;
  text-align: center;
}

td a {
  color: white;
}

<!-- DEMONSTRATION-ONLY HTML -->

<table>
  <tr>
    <td><a href="#">Loooooooooooooong</a></td>
    <td><a href="#">Short</a></td>
  </tr>
  <tr>
    <td><a href="#">Meeeedium</a></td>
  </tr>
</table>

注意:

1. 两列的宽度相同。
2. 表格没有固定的宽度(例如 100% 或 300 像素)，即它的宽度只是确保内容适合其单元格所需的宽度。 (或者换句话说:如果只有很少的内容，整个表格也会很窄。)
3. 只有当整个网格太大而不适合包含 block (宽度方向)时，单元格内容才会换行。
4. 我们必须假设不能在 HTML 代码中引入行。语义要求 HTML 代码以这种线性方式构建。 (不过，我们还是需要网格设计。)¹

我能够通过几乎仅使用 CSS 的解决方案实现我的目标。但是，因为似乎没有Using CSS, how to add a pseudo element before every odd child element that is "outside" of that child element?的答案。我希望找到一种完全不同的方法来用纯 CSS 实现这一点。

所以我的问题归结为:是否有针对我的问题的纯 CSS(= 非 JavaScript)解决方案？

---

编辑: ¹ 如果需要，我们可以在每个单个元素周围添加额外的包装元素。但是，我们不能包装一组元素。

例如，我们可以包装每个 gridentry:

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

但是我们不能包装元素组，所以这样的事情是不可能的:

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

Answer 1

自从 CSS Grid 得到更多支持后，现在才重新审视它。 CSS Grid 的一种解决方案是这样的:

.linkgrid {
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 10px;
  row-gap: 10px;
}

.gridentry > * {
  display: block;

  padding: 10px;

  text-align: center;
  
  background-color: red;
  color: white;

  /* This is helpful if the texts get too long to break them "naturally": */
  /* word-break: break-all; */
}

<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 class="gridentry">
    <a href="#">Short</a>
  </div>
  <div class="gridentry">
    <a href="#">Short</a>
  </div>
</div>