Using CSS, how to create a two-column grid with equal-width columns that are “only as narrow as required”?

Answer 1

Just revisited this now since CSS Grid has become much more supported. One solution for CSS Grid would be this:

.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; */
}

  

    Loooooooooooooong
  
  

    Short
  
  

    Meeeedium
  
  

    Short
  
  

    Short