generar CSS en base al HTML

[quico5]

Me gustaría capturar 'data-grid' y convertirlo en CSS

Código HTML:

<div data-gird="1fr 3fr 1fr"></div>
<style>data-grid{grid-template-columns:1fr 3fr 1fr; -ms-grid-columns: 1fr 3fr 1fr;}</style> 

Código HTML:

<div data-gird="repeat(1,1fr 3fr 1fr)"></div>
<style>data-grid{grid-template-columns:repeat(1,1fr 3fr 1fr); -ms-grid-columns: (1fr 3fr 1fr)[1];}</style> 

Este último casi es descartable

Código HTML:

<div data-gird="10em repeat(1,1fr 3fr 1fr)"></div>
<style>data-grid{grid-template-columns:10em repeat(1,1fr 3fr 1fr); -ms-grid-columns: 10em (1fr 3fr 1fr)[1];}</style>