1 Thing A Week 1 Thing
A Week

Why the order property in CSS frustrates me

Week 272.0 — 9th January '23

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

Advertisement

Notable

Quick links and commentary on interesting articles, videos and more throughout the week.

  1. 272.1 – Monday
    1. product designer maker uploaded a drawing to Instagram everyday for a year product designer maker on youtube.com
  2. 272.2 – Tuesday
    1. How Artisans Make One Of Pakistan's Favorite Board Games Insider Art on youtube.com
  3. 272.6 – Saturday
    1. Spiral Aurora over Iceland Stefano Pellegrini on apod.nasa.gov

Jump to notable items for Week #271, Week #273 , view the notable archive or my favourites.

About 1 Thing A Week

A website curated by @cchana bringing you 1 Thing A Week, delivered every Monday morning.

You can find a list of all articles in the archive, or read the most popular.

Find out more about 1 Thing A Week or read the privacy policy.

Market

Visit the market and support 1 Thing A Week.

You can find 1 Thing A Week on Twitter, Facebook, Instagram & Reddit