Grid First, Flex Third, by @fimion:
“Item Flow, Part 1: A new unified concept for layout” by @jensimmons, Saron Yitbarek, Elika Etemad and Brandon Stewart
https://webkit.org/blog/16587/item-flow-part-1-a-new-unified-concept-for-layout/
> As we worked through the details, we started to get excited. Suddenly new features for Flexbox and Grid that people have wanted for years had an obvious home. Things seemed to click together elegantly. New capabilities emerged
This is really an exciting…
️ https://nicolas-hoizey.com/links/2025/04/01/item-flow-part-1-a-new-unified-concept-for-layout/
“Item Flow, Part 1: A new unified concept for layout” by @jensimmons, Saron Yitbarek, Elika Etemad and Brandon Stewart
https://webkit.org/blog/16587/item-flow-part-1-a-new-unified-concept-for-layout/
> As we worked through the details, we started to get excited. Suddenly new features for Flexbox and Grid that people have wanted for years had an obvious home. Things seemed to click together elegantly. New capabilities emerged
This is really an exciting…
️ https://nicolas-hoizey.com/links/2025/04/01/item-flow-part-1-a-new-unified-concept-for-layout/
Little @codepen demo: stacked avatars https://codepen.io/thebabydino/pen/ogNQryV
Flexy flex layout for any number n of items such that we have:
at most 3 items on a row at least 2 items on a row IF we have at least 2 items in total
In only 5 (display, flex-wrap, gap, flex and flex-basis override) CSS declarations, working for any number n of items! 
Because someone asked for this on reddit https://www.reddit.com/r/css/comments/1jayx5v/comment/mhq2ldw/
Here is the @codepen demo https://codepen.io/thebabydino/pen/OPJOepJ
The #OpenWebCalendar has a new #UI!
You can head over to https://open-web-calendar.hosted.quelltext.eu and try it out:
- #edit the #calendar AND see it updating
- #encryption protects #private calendars and the #password
- #CalDAV support
- Change the size to see how it works on other screens
In the picture, the URL to the Personal CalDAV calendar is encrypted and the events show up.
Technically, I really enjoyed #flexbox and #CSS variables i.e. for the dynamic resizing.
Un outil interactif pour comprendre le positionnement Flexbox en CSS et expérimenter ses propriétés.
Pretty happy how my HTML DM screen pages turned out and are even printable. Here's the last page.
CSS border-image-source and slices used with the box border ( not your 00's average borders anymore ).
Note: CSS mix-blend-mode: multiply used on the AI illustration (I suck at drawing) to let the white pass through as transparent to get a look it's painted on top of the paper.
Works 
on both A4 and Letter size.
Hope #tailwindcss support #flexbox safe alignment utilities soon.
Модули CSS раскладки — что такое и как готовить
В 20-ом веке браузеры были гораздо менее развиты, а CSS сильно ограничен. Он подходил только для оформления простых текстов что-то вроде документов Word. Для оформления сайтов приходилось обращаться к таблицам, чтобы создавать подобие типографской сетки для раскладки элементов. Пока в 2003 году не появился CSS Zen Garden, пропагандирующий оформление сайтов с помощью CSS. В оформлении использовались хаки с флоатами и другие трюки, но технология была несовершенна. Далее, с развитием браузеров, появились инлайн-блоки. Они неплохо справлялись с расположением элементов в ряд, но тоже имели недостатки. И только в начале десятых появились новые модули раскладки: Flexbox и Grid Layout. О них и поговорим.
Flexbox Froggy - Un jeu pour apprendre les flexbox CSS
https://flexboxfroggy.com/#fr
> Bienvenue à Flexbox Froggy, un jeu où vous aidez Froggy la grenouille et ses amis en écrivant du code CSS !
via le taf :)
#apprendre #flexbox #css
really the more I use it, the more convinced I am that #CSS #Flexbox makes #WebDesign fun again. being able to go from a 2 column layout nav-left, content-right as flex: row, to a stacked single column layout with content above nav as flex: column-reverse, with a single at query in the CSS is a real hoot.
Every time I find a way to use it, theres SO many problems from the past it solves.
CSS Feature Update: New Tools and Capabilities 
#CSS establishes unified baseline path across major #browsers, improving cross-browser compatibility standards
New features include Aligned Content Property for element centering, @property rule for #animation control, and Starting Style rule for transitions
Technical additions bring math functions (round, rem, mod), efficient #darkmode implementation, and interpolate size property
#Developer workflow improvements include user-specific form validation classes and simplified element positioning without #flexbox or #grid
Core updates focus on transition handling, interaction responses, and streamlined #frontend development patterns
Reference: https://youtu.be/A89FMtIkWKc
Am I the only one who gets heavily confused that – to position a flex item – I have to align the items and justify the content. No, uhm, I align the content and justify the items? I'm sure there is logic behind this! But hey: What do you think? Which is the correct way to do the same alignment with grid?
This. Is. Not. Logical. 
I made this over 6 years ago: hand-drawn-like image border with #SVG filters codepen.io/thebabydino/pen/PyXoMW
I had no idea what I was doing back then, so I'm surprised I don't hate the code. Though some things I surely wouldn't do the same way.
Another @codepen remake: this hover effect menu https://codepen.io/thebabydino/pen/DZpgaZ
Using flexbox instead of floats and CSS variables & mathematical functions so that on hover we have a simple transition and not the abomination that is keyframes at 49.999% and 50%.
If I’m blunt with myself I’ve already bit off more than I can reasonably chew in a reasonable amount of time, lol.
#blog #design #gallery #artwork #shop #products #records #magazine #photos #objects #posts #uses #now #blogroll #projects #ecommerce #cms #relatedPages #grid #flexbox #css #ally #php oh, and #coffee
