Scale grids are only supported on Group when there is no child DisplayObjects. This means that every element in the Group must be a GraphicElement and none of those elements can have properties set on them that require its own DisplayObject (like rotation).
From the Group documentation:
Note: The scale grid might not function correctly when there are DisplayObject children inside of the Group, such as a component or another Group. If the children are GraphicElement objects, and they all share the Group's DisplayObject, then the scale grid works properly.
Setting any of the following properties on a GraphicElement child requires that GraphicElement to create its own DisplayObject, thus negating the scale grid properties on the Group.
alpha
blendMode other than BlendMode.NORMAL or "auto"
colorTransform
filters
mask
matrix
rotation
scaling
3D properties
bounds outside the extent of the Group
So something like this should work:
<s:Group scaleX="2" scaleY="2" scaleGridLeft="20" scaleGridTop="20" scaleGridBottom="80" scaleGridRight="80">
<s:Rect width="20" height="20" x="0" y="0"><s:fill><s:SolidColor color="green" /></s:fill></s:Rect>
<s:Rect width="20" height="20" x="0" y="80"><s:fill><s:SolidColor color="green" /></s:fill></s:Rect>
<s:Rect width="20" height="20" x="80" y="0"><s:fill><s:SolidColor color="green" /></s:fill></s:Rect>
<s:Rect width="20" height="20" x="80" y="80"><s:fill><s:SolidColor color="green" /></s:fill></s:Rect>
<s:Rect x="20" y="20" width="60" height="60">
<s:fill>
<s:SolidColor color="blue" />
</s:fill>
</s:Rect>
</s:Group>
But this won't be supported since Button extends from DisplayObject:
<s:Group scaleX="2" scaleY="2" scaleGridLeft="20" scaleGridTop="20" scaleGridBottom="80" scaleGridRight="80">
<s:Rect width="20" height="20" x="0" y="0"><s:fill><s:SolidColor color="green" /></s:fill></s:Rect>
<s:Rect width="20" height="20" x="0" y="80"><s:fill><s:SolidColor color="green" /></s:fill></s:Rect>
<s:Rect width="20" height="20" x="80" y="0"><s:fill><s:SolidColor color="green" /></s:fill></s:Rect>
<s:Rect width="20" height="20" x="80" y="80"><s:fill><s:SolidColor color="green" /></s:fill></s:Rect>
<s:Button label="Is DisplayObject" />
</s:Group>
And Group also extends from DisplayObject so this won't work either:
<s:Group scaleX="2" scaleY="2" scaleGridLeft="20" scaleGridTop="20" scaleGridBottom="80" scaleGridRight="80">
<s:Rect width="20" height="20" x="0" y="0"><s:fill><s:SolidColor color="green" /></s:fill></s:Rect>
<s:Rect width="20" height="20" x="0" y="80"><s:fill><s:SolidColor color="green" /></s:fill></s:Rect>
<s:Rect width="20" height="20" x="80" y="0"><s:fill><s:SolidColor color="green" /></s:fill></s:Rect>
<s:Rect width="20" height="20" x="80" y="80"><s:fill><s:SolidColor color="green" /></s:fill></s:Rect>
<s:Group />
</s:Group>
This post might be useful for learning about the difference between children and elements.
