Skip to main content

First, this feature is fantastic—it unlocks much cleaner output in Dev Mode and makes grid-like layout in design mode much simpler. But I think there’s a chance to push it even closer to parity with real CSS Grid and better support for table-like UI.

Here are two suggestions:

 

Dynamic sizing for columns and rows

Currently, all columns in Grid Auto Layout are either equally sized or fixed. It would be amazing to support dynamic sizing more like CSS Grid’s fr units. Specifically:

  • Support relative sizing (like fr units) that automatically divides leftover space among columns.

  • Allow setting min/max constraints on columns and rows (similar to minmax() in CSS grid).

  • Support percentage-based column sizing as an alternative to fixed pixels or even fractions.

Why?

Many real-world responsive designs need columns that flex but don’t shrink below a certain width. Supporting this would let us prototype and hand off responsive grid layouts with far less developer guesswork. *This doesn’t just allow devs to code more accurately, it also teaches designers what these new-ish CSS display modes are capable of.

 

“Table” mode that outputs semantic HTML tables

A dedicated “table” mode for Grid Auto Layout that:

  • Constrains the design to HTML table rules (rows, cells, proper nesting).

  • Outputs semantic HTML <table>, <tr>, <td> markup in Dev Mode.

Why?

Enterprise designers often need to hand off real data tables, and semantic markup is critical for accessibility and maintainability. A mode like this would:

  • Help enforce correct table design (no “fake” div-based tables).

  • Greatly improve design–dev parity.

  • Make your enterprise UX customers very happy.

 

Bonus / Stretch goals

If you want to go even further (and this is pretty far):

  • Add support for named grid lines / areas in design mode, aligning with CSS Grid’s grid-template-areas.

Be the first to reply!

Reply