I ended up refactoring the grid layout for Good Gear Club for the fourth or fifth time a couple of days ago after I realised that the markup wasn't very SEO friendly and could cause pages to appear blank in iOS and macOS' reader mode in Safari.
Last week, I looked at how I'd approached part of the layout so that featured items were more prominent. This week, I wanted to look at one property in particular that I've found very frustrating to work with and made the whole thing feel more complicated than it needed to be.
Whether it's flexbox or grid, the order property in CSS is really handy for making visual changes. Not something I've used a lot on the past, but certainly been aware of it and it has been useful in some cases. This was the first time I'd really put it to work and encountered some nuances that I wish you could overcome.
Firstly, the order property takes integers only. Whole numbers are the only thing that works, so if you end up with two elements with the same value they'll have to battle it out... except there's no real battle, their original order comes into play and will determine who wins.
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Fourth Item</li>
</ul>
If I take the markup above and decide to put the fourth item first, easy enough by setting it's order to -1. 0 is what the default order seems to be for all elements and 1 would put it at the end.
We can overcome the need for -1, which doesn't really describe its position by setting the correct order placement on each element but setting the fourth item to have an order of 1 in this scenario would actually set put it in the second position because it now matches the specified order but it came after the first item naturally.
Similar if we want to the first item last, we can easily do that by setting its order to 1. If each element has a specific order set, then if the first and fourth items match, then the first item would actually be third.
As I mentioned, only whole numbers count so setting it to 0.5 or 4.5 would have no effect. Much like the aspect-ratio property having no real way to deal with the gap property when used in a grid it would be good to have an option here to say if it should come after or before matching elements.
You can see three examples of what I thought would happen but what actually happens here:
| More from 1 Thing A Week | |||
|---|---|---|---|
| « Working with CSS grid, gap and aspect-ratio | Finally, :has() is here! | Is Twitter getting better? » | |
You can find 1 Thing A Week on Twitter, Facebook, Instagram & Reddit