Ajuste automático de columnas con cuadrícula CSS

Estoy tratando de determinar si la cuadrícula CSS es capaz de comportarse como una tabla.

Entonces, si tengo una pieza larga de “datos de celda” (columna 2) y hay espacio disponible en otra parte de la tabla, no quiero que se ajuste como lo hace en la imagen siguiente:

enter image description here

Lo que quiero lograr es algo como esto. Donde la columna con el contenido más largo crece y las otras columnas se reducen en función del contenido en esa columna.

enter image description here

He subido un ejemplo aquí en CodePen: https://codepen.io/anon/pen/WdNJdY

.wrapper { display: grid; grid-template-columns: 33.33% 33.33% 33.33%; background-color: #fff; color: #444; max-width: 800px; } .box { background-color: #444; color: #fff; border-radius: 5px; padding: 20px; font-size: 150%; } 
 
col 1
col 2
col 3
short data
a really long piece of data
short data

Soy muy nuevo en la cuadrícula de CSS, así que tengo curiosidad si esto es posible.

Cualquier ayuda es apreciada. ¡Gracias por adelantado!

En lugar de configurar tus columnas al 33% …

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

… que establece un ancho fijo, haga que cada columna use el espacio disponible:

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

Luego, evite que su texto se ajuste:

 .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%; } 
 
col 1
col 2
col 3
short data
a really long piece of data
short data

La respuesta resultó ser bastante simple cuando dejé de pensar en ello. La pregunta se contestó a sí misma, puede usar auto como ancho de columna en lugar de porcentajes o fracciones.

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

Ver: https://codepen.io/anon/pen/baGKYb (probado en Chrome)

Oh grid, ¿hay algo que no puedas hacer?