I've been working with a css-grid and it's almost there, but I'm stuck on reordering the items in a specific way.
Currently, the html layout is set as “1, 2, 3, 4,…10”, but for smaller screens, I want the visual order to be “1, 2, 4, 3, 5, 6…10”
While I understand that changing the DOM might be better for accessibility purposes, my current skill level doesn't allow it. For now, I am fine with just adjusting the visual order in CSS for my portfolio site aimed at sighted users.
I'm seeking feedback on CSS approaches, but I'm also open to suggestions on adjusting the DOM structure.
https://i.sstatic.net/Crfr8.png
* {
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>