Change order of items in CSS Grid without media queries

HTML & CSS
1

Hello all,
I have a css-grid that is almost working the way that I want, but I cant figure out how to change the order of items in a specific way, without using media queries.

The html of the items is laid out in a “1, 2, 3, 4,…10” order. But at smaller screen sizes, I’d like the visual order to be “1, 2, 4, 3,5,6…10”

Ideally, from an accessibility POV, my guess is that this would be better to do in the DOM - but thats beyond my current skill level - and this is for a portfolio site aimed at sighted users, so I’m okay with just changing the visual order of the grid in the CSS until I figure out the DOM stuff… :pensive:

I’m looking for CSS feedback, but am open to hearing how to change the DOM!

Also, I’m coding in SASS, so any dart-sass maths answers are welcome!

reorder
reorder2149×1468 41.2 KB

HTML

<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>

CSS

* {
    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;
}

Thanks for any thoughts or input!.

1 Like
2

And why can’t you use media queries? They are well supported for years and kinda designed for this sort of thing.

You might be able to do something similar with flexbox and the order property to order items (as talked about here… https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items) but honestly I would do media queries.

4 Likes
3

I think this does what you want without media queries.

li {
  order: 999;
}
li:nth-child(1) {
  order: 1;
}
li:nth-child(2) {
  order: 2;
}
li:nth-child(3) {
  order: 4;
}
li:nth-child(4) {
  order: 3;
}

Unless I misunderstood :slight_smile:

3 Likes
4

Thank you! This is exactly what I was looking for!

Now, let me see if I’m understanding your code.

  1. li { order: 999;} = all list items are pushed to the back
  2. Next, the first two list items are explicitly put into 1st and 2nd place
  3. Then, the 3rd list item is explicitly placed in the 4th position, behind/under the “feature”, or 4th item.
  4. Next, the 4th item (“feature”) is moved ahead/above the 3rd list item.
  5. But, on large screens, grid-auto-flow: dense; will move the 3rd item back above “feature” to fill the available space in the row.

The DOM and addressing my accessibility issue is definitely on my list of things to do/learn. :nerd_face:

Thanks Paul! :star_struck: :grin:

2 Likes
5

Yes perfect explanation :slight_smile:

The dense value is a clever value in that it fills the gaps with items after the large item.

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.