This chapter is from the book
This chapter is from the book
This chapter is from the book
Working with the Grid Panel
The Grid panel is the most versatile panel style because of its flexible layout. Elements in the Grid can grow to the size of the Grid and align themselves to the edges or center of the panel, unlike the Canvas panel, which locks elements in fixed positions.
Rows and columns
Rows and columns organize the Grid panel into logical areas.
To add a row or column:
- From the Toolbox, choose the Grid tool
and draw a Grid on the Artboard. - From the Toolbox, choose the Selection tool.
- Double-click the Grid. A yellow selection outline appears around the edges of the Grid along with rulers to the top and left sides (Figure 4.4).
Figure 4.4 Double-clicking the Grid displays a yellow selection outline.
- To add a column, position the mouse pointer over the top ruler. The pointer changes to an arrow with a plus sign, and an orange preview line appears where the column will be inserted (Figure 4.5). Click the ruler to add the new column.
Figure 4.5 Positioning the mouse pointer over the top ruler changes the pointer and displays a preview line to indicate where the column separator will be placed.
- To add a row, position the mouse pointer over the left ruler. As when adding a column, the pointer changes and a preview line appears to indicate where a new row will be placed (Figure 4.6). Click the ruler to add a new row.
Figure 4.6 Positioning the mouse pointer over the left ruler changes the pointer and displays a preview line to indicate where the row separator will be placed.
)
)
)
To remove a row or column:
- Using the Selection tool, double-click the Grid on the Artboard.
- Position the mouse pointer over a row or column indicator in the ruler. The pointer changes to a left/right arrow when the pointer is positioned over the row/column indicator (Figure 4.7).
Figure 4.7 Positioning the mouse pointer over the column indicator changes the cursor, indicating you can select the column.
Click the indicator and press the
key.Or:
Double-click the line.
)
To change the width of a row or column:
- Using the Selection tool, double-click the Grid on the Artboard.
- Position the pointer over a column or row separator. The pointer changes to a left/right arrow to indicate that you can move the line (Figure 4.8).
Figure 4.8 The pointer becomes a double arrow when the pointer is positioned over a column line in the ruler.
- Drag the line to adjust the row or column to the desired size.
)
Positioning elements in a Grid panel
In Chapter 3, you positioned elements using the Selection tool and by modifying the transform. In this section, you'll position elements in a Grid panel using the alignment tools and modifying the Margin properties.
To position an object using the alignment tools:
- Create a Grid and draw an object in it.
- Using the Selection tool, click the object on the Artboard.
- In the Properties panel, locate the Layout section. This section contains buttons to set the horizontal alignment and vertical alignment (Figure 4.9). The default value for HorizontalAlignment and VerticalAlignment is Stretch, the far right button.
Figure 4.9 HorizontalAlignment and VerticalAlignment setting buttons are found in the Layout section of the Properties panel.
- To change the alignment, click one of the setting buttons. Buttons for HorizontalAlignment are Left, Center, Right, and Stretch (Figure 4.10). Buttons for VerticalAlignment are Top, Center, Bottom, and Stretch (Figure 4.11).
Figure 4.10 Buttons for HorizontalAlignment are Left, Center, Right, and Stretch.
Figure 4.11 Buttons for VerticalAlignment are Top, Center, Bottom, and Stretch.
)
)
)
Figure 4.12 shows a circle with a value of 50 for Width and Height, Margin values of zero, and two different alignments. To align to the edge, the margins must be set to zero. Equally important, assigning a static size to your object ensures that the object won't disappear. Sizing is further covered below in the section "Understanding sizes in a Grid panel."
)
Figure 4.12 The top circle is aligned to the left and bottom. The bottom circle is aligned to the center, horizontally and vertically.
To position an object by changing the margin values:
- Create a Grid and draw an object in it.
- Using the Selection tool, click the object on the Artboard.
- In the Properties panel, locate the Layout section. In this section, you can modify the margin values (Figure 4.13).
Figure 4.13 Margin values are found in the Layout section of the Properties panel.
- To change the margin values, in the Margin area enter new values, in clockwise order, for Left, Right, Bottom, and/or Top. As you change the values, the object updates on the Artboard.
)
Figure 4.14 shows a circle aligned to the top left with a top margin of 32 and a left margin of 35. Margins are relative to the object alignment.
)
Figure 4.14 The circle is aligned to the top left with a top margin value of 32 and a left margin value of 35.
)
Figure 4.15 A red bumper appears when you move the circle to the edge of the Grid.
Understanding sizes in a Grid panel
Elements in the Grid can be sized dynamically by setting the Width and Height values to Auto. As the Grid expands and shrinks, the contained elements resize automatically. To preserve the design integrity, you can constrain the height and width to minimum and maximum values.
To set the width and height to autosize:
- Create a Grid and draw an object in it.
- Using the Selection tool, click the object on the Artboard.
- In the Properties panel, locate the Layout section. In this section, you can change the width and height values (Figure 4.16).
Figure 4.16 Width and height values are found in the Layout section of the Properties panel.
- To the right of the Width and Height fields are buttons to set those values to Auto (Figure 4.17). Click the button to set the value to Auto for the respective property.
Figure 4.17 The Auto buttons in the Layout section.
)
)
Figure 4.18 shows a circle before and after the Auto value is applied. The Alignment properties must be set to Stretch to enable the dynamic layout capability.
)
Figure 4.18 The circle stretches to the size of the cell after the Height and Width values are set to Auto.
To set minimum and maximum values for width and height:
- Create a Grid and draw an object in it.
- Using the Selection tool, click the object on the Artboard.
- In the Properties panel, locate the Layout section. At the bottom of the section, click the down-arrow button to show advanced properties (Figure 4.19).
Figure 4.19 Expanding the Layout section's properties view.
- The advanced properties area reveals the values for MinWidth, MinHeight, MaxWidth, and MaxHeight (Figure 4.20). Enter new values in the data fields to set these values.
Figure 4.20 MinWidth, MinHeight, MaxWidth, and MaxHeight fields are located in the advanced properties.
)
)