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%;
}

<divclass="wrapper"><divclass="box a">col 1</div><divclass="box b">col 2</div><divclass="box c">col 3</div><divclass="box d">short data</div><divclass="box e">a really long piece of data</div><divclass="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?