Auto-adjusting Columns With CSS Grid

I'm trying to work out whether CSS grid is capable of behaving like a table. So if I have a long piece of 'cell data' (col 2) and there's space available elsewhere in the table, I

Solution 1:

Instead of setting your columns to 33%...

.wrapper {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
}

... which sets a fixed width, have each column use available space:

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Then, prevent your text from wrapping:

.box { white-space: nowrap; }

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-color: #fff;
  color: #444;
  max-width: 800px;
}

.box {
  white-space: nowrap;
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

<div class="wrapper">
  <div class="box a">col 1</div>
  <div class="box b">col 2</div>
  <div class="box c">col 3</div>
  <div class="box d">short data</div>
  <div class="box e">a really long piece of data</div>
  <div class="box f">short data</div>
</div>

More details here: The difference between percentage and fr units in CSS Grid Layout

Solution 2:

The answer turned out to be pretty simple when I stopped thinking about it. The question answered itself, you can use auto as col width instead of percentages or fractions.

Try grid-template-columns: repeat(3, auto);

See: https://codepen.io/anon/pen/baGKYb (tested in chrome)

Oh grid, is there anything you can't do?