Day 19. Mondrian generator — Perl + CSS Grid, zero JS.

Recursive subdivision → pure HTML, ~3KB. Grid gaps = black lines, cells = colors. How much randomness before balance breaks?

Generative art = aesthetic principles as code. 🎨

#100DayMapChallenge #GenerativeArt #CSSGrid

Patrick - Embrace the chaos — The shape and flow of masonry layouts Ramblings about the layout shape and item flow in masonry, and how that compares to other types of CSS layouts. Masonry is a pretty unique layout type, one where embracing the chaos of the layout can...

#Development #Comparisons
Embrace the chaos · The shape and flow of masonry layouts ilo.im/16av8m by Patrick Brosset

_____
#ModernCSS #Layouts #Masonry #CssGrid #CssFlexbox #Design #WebDesign #WebDev #Frontend #CSS

Understanding the fundamentals of CSS Layout | Polypane When developers say that CSS is hard, they're usually talking about CSS layout. What often gets omitted though is that developers are assumed to understand and…

#Development #Overviews
CSS layout fundamentals · Master the core concepts behind CSS layouts ilo.im/16a1ic by Kilian Valkhof

_____
#Layouts #Positioning #Stacking #CssGrid #CssFlexbox #BoxModel #Browsers #WebDev #Frontend #CSS

When will CSS Grid Lanes arrive? How long until we can use it? Anytime an exciting new web technology starts to land in browsers, developers want to know “when in the world am I going to be able to use this?” Currently, the finalized syntax for Grid Lanes is...

#Development #Previews
When will CSS Grid Lanes arrive? · “It’s going to arrive sooner than you think.” ilo.im/16a21t by Jen Simmons

_____
#ModernCSS #CssGrid #Layout #Masonry #Polyfill #ProgressiveEnhancement #Browsers #WebDev #Frontend #CSS

This is what I see browsers actually doing: what I want in my simple, no wrap use case.

Slightly different things in the hypothetical case.

Chrome, Firefox, Epiphany below.

#CSS #cssGrid #cssLayout

Place non-grid items like a pro with this CSS GRID TRICK YouTube video by Optimistic Web

CSS Grid continues to surprise me. There’s one feature I totally overlooked until recently… and it’s ridiculously powerful. #css #cssgrid #optimisticweb youtu.be/t41vhX5CFH8

Accessible faux-nested interactive controls A really common user interface pattern is a big clickable area, such as a card. Sometimes you need controls within that card that are also clickable. There's lots of ways to do it wrong, but fret not,...

#Development #Techniques
Accessible faux-nested interactive controls · How to solve a tricky accessibility problem ilo.im/169v7j by Eric Bailey

_____
#Nesting #HTML #Accessibility #Usability #WebDev #Frontend #DOM #CSS #CssGrid #ContainerQueries

New Safari developer tools provide insight into CSS Grid Lanes You might have heard recently that Safari Technology Preview 234 landed the final plan for supporting masonry-style layouts in CSS.

#Development #Previews
New Safari developer tools · Safari’s Grid Inspector now supports CSS Grid Lanes ilo.im/169url by Jen Simmons and Brandon Stewart

_____
#ModernCSS #CssGrid #CssFlexbox #Masonry #Safari #Browser #DevTools #WebDev #Frontend #CSS

Why CSS Grid feels complex, and how to keep it simple ✉ Keep up to date with everything I'm up to https://www.kevinpowell.co/newsletter💬 Come hang out with other devs in my Discord Community https://discord.gg...

#Development #Techniques
Keeping CSS Grid simple · What to do when CSS Grid feels complex ilo.im/169j11 by Kevin Powell

_____
#Layout #CssGrid #Browser #WebDev #Frontend #CSS

Phidelity – A Golden Ratio CSS Layout Framework A responsive design and css layout framework that composes your content with natural rhythm and balance.

Just launched my layout and composition #uidesign and #css #cssgrid #containerquery based #goldenratio framework phidelity.interfazer.com

VoxCSS — CSS voxel engine for the DOM A DOM-based voxel engine that renders HTML cuboids with CSS grids, transforms, textures, and dimetric projections.

#Development #Fun
VoxCSS · A CSS voxel engine that renders HTML cuboids ilo.im/1695zn by Layoutit Studio

_____
#CssGrid #3D #Voxels #Layoutit #Frameworks #WebDev #Frontend #HTML #CSS #JavaScript

Happy 2026 ...

#Development #Fun
Happy New Year! · Who said 2026 is only black and white? ilo.im/169j4x by Mark Boots

_____
#Animation #CssGrid #CssCalc #CustomProperties #Design #WebDesign #WebDev #Frontend #HTML #CSS

Discussion on CSS Grid Lanes explores its potential for native masonry layouts and browser implementation debates. It highlights trade-offs between modern features and supporting older systems, impacting web development practices. #CSSGrid 1/6

Introducing CSS Grid Lanes It’s here, the future of masonry layouts on the web!

#Development #Announcements
Introducing CSS ‘grid-lanes’ · The future of masonry layouts on the web ilo.im/169b9q by Jen Simmons, Brandon Stewart and Elika Etemad

_____
#ModernCSS #CssGrid #Layout #Masonry #W3C #Safari #Browser #WebDev #Frontend #CSS

Every modern "WebDev" knows the simple truth: "CSS Grid" is the reigning champion for centering elements. Two lines is all it takes: `display: grid; place-items: center;`.

📄 scriptdatainsights.blogspot.com/2025/12/how-...
🎬 youtube.com/shorts/-3ZO8...
#CSSGrid

🎨 Achieve Pixel-Perfect Alignment with Subgrid!
Tired of messy nested layouts? Say hello to clean, unified design! CSS Subgrid is a game-changer for complex component alignment, letting nested elements seamlessly inherit their parent's structure.

#CSSSubgrid #CSS #WebDesign #FrontendDev #CSSGrid

When to use what? Flexbox is ideal for 1D layouts where content sizes elements. Grid excels in 2D layouts where the container dictates sizing. Subgrid *enhances* Grid, enabling precise alignment across nested grid items. Choose wisely! #CSSGrid 4/5

Brand New Layouts with CSS Subgrid • Josh W. Comeau Subgrid allows us to extend a grid template down through the DOM tree, so that deeply-nested elements can participate in the same grid layout. At first glance, I thought this would be a helpful convenience,...

#Development #Examples
Brand new layouts with CSS subgrid · “Subgrid unlocks exciting new layout possibilities.” ilo.im/168p12 by Josh W. Comeau

_____
#CssGrid #CssSubgrid #Layouts #Grids #Browser #Design #WebDesign #WebDev #Frontend #CSS

Building a multi stage timetable with modern CSS using grid, subgrid, round(), and mod(). - 9elements Combining finest craftsmanship with elegant design to ship innovative digital experiences.

Build a timetable with CSS Grid 👀

➡️ 9elements.com/blog/buildin...

#css #cssgrid #layout #frontend #dev

Building a multi stage timetable with modern CSS using grid, subgrid, round(), and mod(). - 9elements Combining finest craftsmanship with elegant design to ship innovative digital experiences.

#Development #Guides
Building a multi-stage timetable · How modern CSS powers a cutting-edge layout ilo.im/168i5y by Nils Binder

_____
#ModernCSS #CssGrid #CssSubgrid #ScrollDrivenAnimations #Calendar #Browser #WebDev #Frontend #HTML #CSS

Layoutit Terra - CSS Terrain Generator An interactive CSS terrain generator. Define a grid and generate your terrain!

#Development #Generators
Layoutit Terra · A terrain generator powered by HTML/CSS ilo.im/167vde by Leniolabs

_____
#3D #Landscapes #Terrains #Playgrounds #Games #WebDev #Frontend #HTML #CSS #CssGrid

CSS Grid: A helpful mental model and the power of grid lines Grid is a powerful, flexible tool that brings complex layouts to life.

#CSSGrid: A Helpful Mental Model and the Power of Grid Lines || #CSS #WebDev #FrontendDev bit.ly/4oUmn8V

Super Simple Full-Bleed & Breakout Styles Having a width-limited centered column of content is common and good, but what do you do when you need to break out? It's not hard these days, but it does depend on the situation.

#Development #Techniques
Simple full-bleed and breakout styles · Modern CSS solutions for a classic layout problem ilo.im/1682wb by Ana Tudor

_____
#ModernCSS #CssGrid #CssUnits #FullBleed #Layout #WebDev #Frontend #HTML #CSS

Pure CSS Tabs With Details, Grid, and Subgrid | CSS-Tricks Can we use the <details> element as the foundation for a tabbed interface? Why yes, we can!

#Development #Techniques
Tabs with ‘details’, grid, and subgrid · A modern HTML/CSS approach using no hacks ilo.im/167ye4 by Silvestar Bistrović

_____
#HtmlDetails #CssGrid #CssSubgrid #Accessibility #Browsers #WebDev #Frontend #HTML #CSS

Solved By Modern CSS: Section Layout Building a typical section design with modern CSS.

#Development #Techniques
Section layouts · How modern CSS can make them more dynamic ilo.im/167vol by Ahmad Shadeed

_____
#ModernCSS #CssGrid #ContainerQueries #CssClamp #Layouts #Typography #Browser #WebDev #Frontend #CSS

Home page

Update for Angular Magma !!
magma.ikilote.net

See changelog :
git.ikilote.net/angular/magm...

#cssgrid #angular #opensource

The Fundamentals of CSS Alignment This deep dive covers everything you need to know about CSS alignment. It's time to stop doing trial and error and finally understand how everything works!

#Development #Explainers
The fundamentals of CSS alignment · How alignment properties work in layouts ilo.im/166mhk by Temani Afif

_____
#Layout #Content #Alignment #Spacing #CSS #Containers #CssGrid #CssFlexbox #WebDev #Frontend

Demo for contrib-calendar component

New component for Magma
magma.ikilote.net/component/co...

See changelog : git.ikilote.net/angular/magm...

#cssgrid #angular #opensource

Enhance your CSS Grid skills with Bricks Builder and the Advanced Themer Framework. #CSSGrid #WebDesign https://www.youtube.com/watch?v=efrY9KjJ1uQ

Explore the latest Visual CSS Grid Builder in Bricks 2.0 for effortless creation of advanced responsive layouts. Elevate your design skills with #Bricks #CSSGrid. https://www.youtube.com/watch?v=PNy6k-78zEE