Ahmad Shadeed

After a year of building, The Layout Maestro is officially live! 🎹🥳 An interactive CSS course that teaches you how to think in CSS layouts. 70+ lessons, 7 layouts, 150+ interactive demos! Ready to level up your layout skills? Enroll now👇: thelayoutmaestro.com

This is the best thing that I've read about the web community in a while. Happy that CSS-Tricks is in good hands now ❤️❤️

Alma (6yrs) saw "$19.35" on an Amazon toy page and asked why there is a dot. I opened Figma and typed 1, 1.5 and 2 to explain how fractions work. After 15 secs of explaining, I paused and asked her: is it clear? She said: "just order it". I need to work on my teaching skills for kids. :D

Fit height to background pattern size with calc-size(). Ahmad Shadeed rounds a section’s auto height up to a multiple of the tile height with calc-size() and round(), so the pattern never gets cut off. Chrome-only for now. #css #layout ishadeed.com/article...

✍️ New Article: Fit height to background pattern size with calc size() I wrote about a use-case for calc-size() and round() that helped me avoid cut-off background patterns. ishadeed.com/article/fit-...

✍️ New Article: Fit height to background pattern size with calc size() I wrote about a use-case for calc-size() and round() that helped me avoid cut-off background patterns. ishadeed.com/article/fit-...

Love that (new?) detail in @developer.chrome.com devtools. When using a max-content row/column in grid, it displays the computed size of it.

Working on an update for RTL styling guide and thought about using Linkedin in Arabic for a few days. The amount of confusing translations is insane, not to mention the years-standing RTL mistakes. Lots of work to do there.

In case you missed it, I published a tool called Gradient Layers, which is simply a way to visualize multiple background images in CSS. Works well for mask-image, too. Take a look: lab.ishadeed.com/tools/gradie...

The @webdevs.firefox.com team shared an app to rank the web platform features you want to be supported in Firefox 2027. I just did mine, and you should too! interop-rank.fxdx.dev

Debugging multi-layer CSS gradients/masks in the DevTools is painful, so I built a tool to help me visualize each layer. It works for CSS art/drawings, too. Check it out: lab.ishadeed.com/tools/gradie...

Debugging multi-layer CSS gradients/masks in the DevTools is painful, so I built a tool to help me visualize each layer. It works for CSS art/drawings, too. Check it out: lab.ishadeed.com/tools/gradie...

Love to see anchor position tooling in Chrome Canary! 🤩 Also, happy that my thinking about the initial tooling was correct :D (Look at the dashed pink outlines (mine) vs Devtools ones (blue-ish) from my article on the topic.

I'm exploring Framer app for fun and this caught my attention. Using "1fr" for a non-grid layout to say that this card takes the full width of its container. Imagine if this person decided to learn CSS some day, they will use "width: 1fr". :D

I got a thank-you email from someone who read my recent article and it made my morning. Emails/messages like this are much needed in times like these. If you want to send a thank-you message to your favorite author, do it now. It's the time.

"AI Is Rotting Your Brain": a video that shows exactly how AI overuse affects the brain and causes a decline in critical thinking. www.youtube.com/watch?v=ZumX...

The Layout Maestro course is $30 off until Wednesday, 30th Sep. No code needed. Learn how to think about web layouts and decide which method to use and when. Check it out: thelayoutmaestro.com

The Layout Maestro course is $30 off until Wednesday, 30th Sep. No code needed. Learn how to think about web layouts and decide which method to use and when. Check it out: thelayoutmaestro.com

✍️ New Article: Detect when elements overlap with CSS Can CSS tell when two elements overlap? At first, I thought this was not possible, but it turned out it can be done with scroll-driven animations and anchor positioning. ishadeed.com/article/css-...

✍️ New Article: Detect when elements overlap with CSS Can CSS tell when two elements overlap? At first, I thought this was not possible, but it turned out it can be done with scroll-driven animations and anchor positioning. ishadeed.com/article/css-...

I got multiple review requests for CSS projects/tools based on articles I wrote or other content from the web. And they are very clearly vibe-coded. Why should I care and spend time reviewing when the person on the other side didn't spend time writing it? Let the AI review it for you then. Big no.

Made cookies for this week and mainly for Alma's lunch box. 🍪 I used a combination of 100% + 64% dark chocolate, the taste is balanced and less sugary.

I love publishing new content on my blog, and will keep doing so. It's a joy to share what you do with others. 💫

While working on a project, I paused a bit to style an icon + text. When the text is short, the icon is vertically centered. If the text wraps, the icon is aligned with the first line. ishadeed.com/article/alig... This is a result of using lh, aspect-ratio, height: auto, flexbox and more.

While working on a project, I paused a bit to style an icon + text. When the text is short, the icon is vertically centered. If the text wraps, the icon is aligned with the first line. ishadeed.com/article/alig... This is a result of using lh, aspect-ratio, height: auto, flexbox and more.

Today is the beginning of 1st grade for Alma 💜 Kids grow up so fast! Just yesterday, we started kindergarten.

Updated my link + popover nav post: adrianroselli.com/2026/07/link... Now includes `flex-wrap: balance` for the navigation items thanks to Ahmad Shadeed’s post: ishadeed.com/article/flex... I am amazed how much new CSS I see, then forget, seemingly immediately. #CSS

Split view is my favorite new feature in Chrome! Helps a ton when testing multiple viewport or container sizes.

Oh, can't wait to see the random() function in Chrome. I used 2 times in my lab category page! Check it out in Safari in case you are curious :D lab.ishadeed.com/container-qu...

✍️ New Article: Balancing flex items with flex-wrap: balance I explored flex-wrap: balance and flex-line-count and really enjoyed using them. I even made a masonry layout by mixing flex-line-count, round, clamp, and container queries units! 😀 ishadeed.com/article/flex...

I didn't check the feed for a few days, and I like getting back to see the status of the dark/light debate. What is the latest?

Great news! The CSS sibling-count() and sibling-index() functions are now Baseline Newly Available! I.e implemented in all major browsers.

That post represents me too 😅

When you scroll a 2D scroller on the web, the browser may ignore some minor scroll deltas in the non-main scrolling axis when the user’s intent was to scroll only one axis. Sometimes this “railing” gets in the way … and with `scroll-axis-lock: none`, you can soon remove it 😊 brm.us/scroll-axis-...

When using CSS gradients to build an unusual background pattern, do you often struggle to remember how color stops work, and end up looking up the syntax online?

This is a great post to read, lots of useful UX and usability thoughts. I like this approach.

I wish @webdevs.firefox.com will enable scroll-driven animations by default this year. Please! 🙏

🎉 new post! Dynamic Colour Schemes With Modern CSS What magical CSS can we use to create not just a quick and dirty colour palette, but a whole colour scheme? Anogulous? Complementary? Triadic? It's all here! https://www.alwaystwisted.com/articles/dynamic-colour-schemes-with-modern-css 🙏🖤

The LH unit in CSS is cool! In my new article, I wrote about it and shared my favorite demos. ishadeed.com/article/lh-u...

The LH unit in CSS is cool! In my new article, I wrote about it and shared my favorite demos. ishadeed.com/article/lh-u...

A friendly reminder that I have a course on CSS layouts! Check it out and use "JUL26" to apply a $20 discount (Valid until July 31). thelayoutmaestro.com

A friendly reminder that I have a course on CSS layouts! Check it out and use "JUL26" to apply a $20 discount (Valid until July 31). thelayoutmaestro.com

Now I know why my demo with flex-wrap: balance is suddenly working on Chrome stable! Niice 🤩

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...

✍️ 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...