iShadeed

Archives
Subscribe
July 20, 2026

FIFA Layout, Select height, grid lanes

Hello everyone,

In the last issue, I asked about how often you will like to receive my newsletter, and the answers were:

  • Weekly: 37%
  • Bi-weekly: 34%
  • Monthly: 29%

105 of you answered this. Weekly was the most popular option, so starting this week, I'll send a newsletter every week between Mon-Wed.

Let's get into the email.


Rebuilding FIFA Standings Layout with Subgrid

When I see an interesting layout, I can’t stop myself from opening the DevTools and seeing how it’s built. Most of the time, I find the layouts are built in a hacky way. That’s when I got curious about exploring it myself, and that’s how this article was born.

In this article, I explored using CSS grid and subgrid to build the FIFA standings layout in a more robust way.

Standings layout

The knowledge of CSS grid for this kind of layouts is helpful, as we can quickly create it without having to change the HTML (as in FIFA's website) to implement the design.

The Goldilocks customizable select height

This is a really helpful article about how to customize the select menu height based on the position of the select, content, and more. What I like about this article is the educational style that starts with the plain example then gradually enhance it.

Your Grid Lanes will likely fail WCAG 2.4.3

A useful article from Manuel about why CSS Grid Lanes are inaccessible by default. It's worth checking out if you're planning to use them in your projects.


On a related note, you might like The Layout Maestro, my interactive CSS layout course, which I built to help you understand layouts and know when to use which layout method in CSS.

Check out the Layout Maestro and enroll for just $199. Use the code "fifa" for $20 discount. Student discount and purchasing power parity are available, too.


Thanks a lot! If you have ever found something interesting in CSS or design recently, please feel free to share it in a reply. I'm happy to hear from you!

Ahmad

Don't miss what's next. Subscribe to iShadeed:
Older → Fixing a background pattern with round()

Add a comment:

Posting this comment will subscribe you to this newsletter with the email address you enter.
Share this email:
Share on Facebook Share on Twitter Share on LinkedIn Share on Hacker News Share via email
GitHub
Bluesky
Twitter
LinkedIn
Powered by Buttondown, the easiest way to start and grow your newsletter.