css - 具有多个相同宽度的自动列的 CSS Grid

Question

我正在尝试使用 CSS Grids 实现以下布局。这是一个基本的键值显示，一行三对。

| foo       | value 1      | bar       | value 2      | baz       | value 3      |
 xxxxxxxxxxx                xxxxxxxxxxx                xxxxxxxxxxx
| qux       | value 4      | quux      | value 5      | quuuuuuux | value 6      |
 xxxxxxxxxxx                xxxxxxxxxxx                xxxxxxxxxxx

键( , foo, bar, baz...) 在auto 中，但等宽列。请注意，第二行包含最长的 key ，定义了所有键列quuuuuuux的宽度。

这些值1fr应该相等（或相似）用完剩余的网格空间。

我已经试过grid-template-columns: repeat(3, auto 1fr);了，但是键列仍然有单独的宽度。

布局应该处理任意数量的键值对。

.grid {
  display: grid;
  grid-template-columns: repeat(3, auto 1fr);
  grid-gap: .2em .5em;
}

.key {
  font-weight: bold;
  background: #ffcccc;
}

.value {
  background: #efefef;
}

<div class="grid">
  <div class="key">foo</div>
  <div class="value">value 1</div>

  <div class="key">bar</div>
  <div class="value">value 2</div>

  <div class="key">baz</div>
  <div class="value">value 3</div>

  <div class="key">qux</div>
  <div class="value">value 4</div>

  <div class="key">quux</div>
  <div class="value">value 5</div>

  <div class="key">quuuuuuux</div>
  <div class="value">value 6</div>
</div>

标签： csscss-grid