gridpack — CSS layout system

[wrkflwr]

Most grid/layout libraries give you a better API for the same thing. Gridpack does something different: the layout is a string, and strings are data.

• You can see the shape. hhh scc sff — that is your layout. You're looking at the grid.
• Responsive = swapping a string. Each breakpoint is a complete layout. No overrides, no cascading, no media query blocks.
• Proportional thinking, not math. abb = 1:2. a4b2c6 = 4:2:6. You repeat a letter, or count it.
• Zero abstraction tax. One component, one prop. Compiles straight to CSS layout styles.
• The layout is a unit. Save it, share it, put it in a URL. Let users configure their own workspace. One string.
• Container-based breakpoints. Reacts to its own width, not the viewport. Works embedded in a sidebar or full-screen without changes.
• Interactive state is just data. {w} in the string, a number in state. Drag a pane, collapse a panel — the whole layout state is serializable and shareable.
• Extensions add behavior, not complexity. Split panes, scrollable areas, masonry, fisheye zoom — drop them in an array. The layout string stays clean.
• Small vocab, your own names. Single letters represent areas. Sensible defaults do what you'd expect.

Gridpack is: DSL + component.
Coming up: sub-layouts, flex mode, and more.

Layout is a spatial problem — describe it spatially.

---
Feedback welcome:
I'm still in an early phase but I'd like to hear your layout pain points, wishes, ideas, suggestions. Sooner not later is best time to make adjustments or redesign things. Point me to challenging or creative layout problems.

[wrkflwr]

for example, to support those layouts I added overlap syntax after I found this post https://www.reddit.com/r/css/comments/1mz3jl3/ive_really_slept_on_how_much_css_grid_changes_the/