Problem
You want to organize various Flex controls/containers in a grid using constraints.
Solution
Use the new constraintColumns and/or constraintRows properties in Flex 3.
Detailed explanation
The contraintColumns property (found in the Canvas, Panel, and LayoutContainer classes), is an array of ConstraintColumn instances (mx.containers.utilityClasses.ConstraintColumn) that horizontally divide a container. The ConstraintColumn instance at index 0 is the left-most column, with indices increasing from left to right.
The contraintRows property (found in the Canvas, Panel, and LayoutContainer classes), is an array of ConstraintRow instances (mx.containers.utilityClasses.ConstraintRow) that vertically divide a container. The ConstraintRow instance at index 0 is the top-most column, with indices increasing from top to bottom.
The following example creates a Canvas container with two constraint columns. The first column is 100 pixels wide, and the second column is 300 pixels wide. The “OK” button positions itself 0 pixels from the first column’s left edge and 0 pixels from the column’s right edge, making it 100 pixels wide. The “Cancel” button positions itself 20 pixels from the second column’s left edge and 10 pixels from the second column’s right edge, making it 270 pixels wide (300 pixels minus 20 pixels minus 10 pixels).
<mx:Canvas width="100%">
<mx:constraintColumns>
<mx:ConstraintColumn id="col1" width="100" />
<mx:ConstraintColumn id="col2" width="300" />
</mx:constraintColumns>
<mx:Button label="OK" left="col1:0" right="col1:0" />
<mx:Button label="Cancel" left="col2:20" right="col2:10"/>
</mx:Canvas>
For more information, see http://blog.flexexamples.com/2007/10/02/positioning-controls-in-flex-3-using-constraint-columns/.
