Post

I wrote about how to build a sport standings layout with grid and subgrid. If you haven't learned subgrid yet, this might be a good use case to see how it works! ✨ ishadeed.com/article/fifa...

Ahmad Shadeed@ishadeed.com

✍️ New Article: Rebuilding FIFA Standings Layout with CSS Subgrid I rebuilt FIFA’s standings layout with CSS Grid and subgrid. It starts with the layout problem, then moves into the final solution, with interactive examples along the way, as usual! 🔗 ishadeed.com/article/fifa...

ishadeed.comRebuilding FIFA Standings Layout with CSS SubgridA look at how to rebuild the FIFA standings layout by using CSS grid, subgrid, and more.

20/7/26, 8:47 am2 reposts26 likes

Jeff Bridgforth

@jeffbridgforth.com

21 July

I enjoyed your article about the tournament grid. I had done a similar exercise several years ago for the NCAA Tournament. codepen.io/webcraftsman... I like your solution with a combination of grid, subgrid, and flexbox. I might consider updating my solution next year.

codepen.ioNCAA Tournament Bracket in CSS Grid 2.0Still in progress...

Ahmad Shadeed

@ishadeed.com

21 July

Interesting solution! Thanks Jeff, glad you enjoyed it 😊

James Stuckey Weber

@jamessw.com

21 July

I wanted to recreate the collapsing scroll I saw in some module bracket views and got a bit carried away. I just used space-around, but am curious to try your method! codepen.io/jamessw/pen/...

codepen.ioWorld Cup Bracket 2026...

Ahmad Shadeed

@ishadeed.com

22 July

Love that! I like the usage of scroll-state to achieve the effect. I looked into the grid only in my experiments and was curious on how to rebuild the collapsing scroll. I'll give it a shot and update the article / let you know when I'm done.