Hacer que las columnas de relleno del contenedor de cuadrícula no sean filas
Quiero que mi cuadrícula se complete verticalmente así:
1 4 7
2 5 8
3 6 9
... arbitrary number of additional rows.
En cambio, se llena horizontalmente así:
1 2 3
4 5 6
7 8 9
Quiero especificar el número de columnas en mi cuadrícula, no el número de filas.
Así es como se ve mi div con el estilo CSS en línea:
<div style="display:grid; grid-template-columns:1fr 1fr 1fr;">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
Es importante que mi cuadrícula tenga 3 columnas de ancho, pero quiero que los elementos se llenen por columna, no por fila. ¿Es esto posible en CSS Grid? He leído estohttps://css-tricks.com/snippets/css/complete-guide-grid/ pero no vi nada sobre el orden.
CSS Flexbox tieneflex-direction
, ¿no hay un atributo como ese para CSS Grid?