Vengo de un fondo pesado de div / float para construir sitios receptivos (por ejemplo, Bootstrap 3, Foundation) y utilicé Flex box brevemente, pero he estado intentando usar Grid en todas partes ya que ha sido realmente genial para resolver una serie de problemas. Parece que me encuentro con problemas "simples" como este con demasiada frecuencia y siento que me faltan algunos conceptos básicos y no puedo encontrar la respuesta en los documentos. De todos modos, al código.

Dada una configuración de cuadrícula como esta:

display: grid;
grid-auto-columns: max-content;
grid-auto-flow: column;

el contenido no se ajusta a una nueva fila una vez que se llena el ancho de su elemento padre. Idealmente, podría tener un ajuste automático sin predefinir mediciones exactas de píxeles, comogrid-template-columns: repeat(auto-fill, minmax(300px, 1fr));. Esto no parece funcionar para mis necesidades: tendría que definir múltiplesgrid-template-columns medidas para diferentes ventanas gráficas y sepa qué ancho es bueno para los elementos dentro de las columnas. Prefiero decirgrid-auto-columns: max-content; y luego haga que los elementos simplemente se ajusten a una nueva línea.

¿Es esto posible con la cuadrícula? ¿Qué me estoy perdiendo / malentendido?

Ver Codepen con un ejemplo completo que demuestra el problema:https: //codepen.io/csdv/pen/Orbrz