Using CSS, how do I create a grid with two columns with equal width columns that are “only as narrow as necessary”?

Question

Assuming I have a piece of HTML that is structured as follows:

<!-- 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>

... I would like to use CSS to get a presentation that looks like this:

/* 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>

Run codeHide result

Note that:

• Columns have the same width.
• The table does not have a fixed width (e.g. 100% or 300 pixels), i.e. it is as wide as required to ensure that the content fits into its cells. (Or put it another way: if there is only a small amount of content, the whole table will also be quite narrow.)
• The contents of the cell will only be completed if it makes the entire grid too large to fit in the containing block (in width).
• , HTML. , HTML . ( , .) ¹

CSS- . , CSS, , "" , ? , CSS.

, : CSS (= JavaScript)?

---

EDIT: ¹ , . .

, , , 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

, , :

.linkgrid {
  max-width: 50%;
  display: table;
}

.gridentry:nth-child(odd) {
  float: left;
  width: 100%;
}

.gridentry:nth-child(even) {
  width: 100%;
  margin-left: 100%;
  margin-right: -100%;
}

.gridentry:nth-child(even):after {
  content: '';
  display: block;
  clear: left;
}

.gridentry > * {
  display: block;
  
  margin-bottom: 10px;
  padding: 10px;

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

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

.gridentry:nth-child(odd) > * {
  margin-right: 5px;
}

.gridentry:nth-child(even) > * {
  margin-left: 5px;
}

.gridentry a {
  color: white;
}

<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>

Hide result