0
175
ViewsCambiar el orden de los elementos en CSS Grid
Tengo un css-grid que casi funciona de la manera que quiero, pero no puedo encontrar la manera de cambiar el orden de los elementos de una manera específica.
El html de los elementos se presenta en un orden de "1, 2, 3, 4,... 10". Pero en tamaños de pantalla más pequeños, me gustaría que el orden visual fuera “1, 2, 4, 3,5,6…10”
Idealmente, desde un punto de vista de accesibilidad, creo que sería mejor hacerlo en el DOM, pero eso está más allá de mi nivel de habilidad actual, y esto es para un sitio de cartera dirigido a usuarios videntes, por lo que estoy de acuerdo con solo cambiar el orden visual de la cuadrícula en el CSS hasta que descubra las cosas del DOM.
Estoy buscando comentarios de CSS, pero estoy abierto a escuchar cómo cambiar el DOM
* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: Arial, Geneva, Helvetica, sans-serif; color: #515C62; } ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(200px, 100% / 3), 1fr)); grid-auto-flow: dense; } li { background: #CACAC7; padding: 5px; height: 50px; margin: 10px; list-style-type: none; color: white; font-weight: bold; font-size: 2em; text-align: center; } #feature { background-color: #FF5916; color: white; grid-column: 1 / -1; } <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li id="feature">4 (feature)</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </body>1 answers
Answer question0
La única adición que se necesita al código dado es establecer los primeros dos elementos en el orden 1, el elemento destacado en el orden 2 y todos los demás en el orden 3.
La cuadrícula CSS colocará el tercer li junto a los dos con el orden 1 cuando haya espacio; de lo contrario, irá debajo del li destacado.
* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: Arial, Geneva, Helvetica, sans-serif; color: #515C62; } ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(200px, 100% / 3), 1fr)); grid-auto-flow: dense; } li { background: #CACAC7; padding: 5px; height: 50px; margin: 10px; list-style-type: none; color: white; font-weight: bold; font-size: 2em; text-align: center; order: 3; } #feature { background-color: #FF5916; color: white; grid-column: 1 / -1; order: 2; } li:nth-child(1), li:nth-child(2) { order: 1; } <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li id="feature">4 (feature)</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </body>