CSS columns con DIV con HEIGHT automático no funciona

[quico5]

El primer DIV que pongo genera el HEIGHT en base a la relación aspecto dada partiendo de WIDTH

Mientras que el Segundo se supone que que COLUMNS define el ancho de los hijos, pero parece que algo falla

Código HTML:

<div style="width:160px;" class="ratio r16-9">Contenedor de 160px x 90px</div>

<div style="columns:100px 3">
  <div class="ratio r16-9" style="width:inherit;">Contenedor de 0px x 0px</div>
</div> 

Código:

.ratio {
  position: relative;
}
.ratio:before {
  content: '';
  display: block;
}
.ratio.r16-9:before {
  padding-top: 56.25%;
}
.ratio.r4-3:before {
  padding-top: 75%;
}
.ratio.r1-1:before {
  padding-top: 100%;
}

[Rafael]

No se entiende nada que necesitas o qué cosa tienes.

Acá puse tu código en un fiddle, modifícalo para que se pueda ver el problema.

https://jsfiddle.net/7210bhyp/

[quico5]

Hola Rafael, , no me fué fácil describirlo, ahí tienes el código, los 2 primeros ejemplos son los parciales, en los siguientes ejemplos se combinan los 2 primeros, parece que "funciona en jsfiddle" aunque las cajas se cortan entre una y otra columna

https://jsfiddle.net/7210bhyp/4/

Aunque tengo mis dudas -> columns: 100px 3; <- Se supone que esto indica un máximo de 3 columnas con un ancho por columna de 100px, pero si pongo un ancho mayor de 300px al contenedor provoca que las columnas se vuelvan más anchas, ¿Es correcto o es un fallo?

Nota: En Opera medio funciona, en Firefox no funcionan los ratio

----------

En la siguiente imagen de ejemplo muestro como podría mostar unas Tarjetas partiendo del CSS: "Columns y Ratio" para controlar ancho y número de los elementos hijos por fila

[quico5]

Creo que me voy acercando, pero las columnas no estan centradas o justificadas ¿Se puede hacer algo?
https://jsfiddle.net/vxqbztse/4/

Actualización:
https://jsfiddle.net/vxqbztse/8/

Faltaria corregir este desbordamiento en webkit: