Net Noodlings with Nathan logo

Net Noodlings with Nathan

Subscribe
Archives
June 17, 2024

Fluid Grids and Inline Conditionals

Hey friends,

Why are peppers the best at archery?

Because they habanero!

πŸ˜‚πŸ˜…


Words I Wrote

You know what goes well with Fluid Type? Fluid Grids!

But not just any grid. This is a SPECIAL grid because it allows for 'breakout' elements. It's based on a technique from Ryan Mulligan that's based a technique from Josh Comeau (as one does on the web... 🧐)

Gone are the negative margins (thanks CSS Grid), gone are the ratcheting container widths with media queries. This is fluid all the way up and downβ€”one definition for desktop and mobile viewports!

Check it out: Fluid Breakout Layout with CSS Grid.


Interesting Web Bits

  • Ahmad Shadeed discusses the CSS Gap property and the problem it solves in his usual thorough manner.
  • Ted Lamade went a month without his smartphone and found he was more present in his life.
  • Brian Bankler gives some sage gaming advice after 30 years of playing games. (The weird format of the list is because each title is technically a board game, ignore the titles mostly and read the actual descriptions).
  • This was interesting, with CSS variables, you can animate an increasing integer which you can then use for all sorts of things...
  • Maggie Appleton asserts that LLMs will give rise to a new breed of barefoot developers.
  • Inline conditionals are coming to CSS!! 🀯
Don't miss what's next. Subscribe to Net Noodlings with Nathan:
Powered by Buttondown, the easiest way to start and grow your newsletter.