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.

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
Add a comment: