ThumbGrid was designed for one purpose: to provide a flexible, customizable thumbnail-based interface for users interested in building their own external navigation (instead of using the one built into :stapi:). With ThumbGrid you can create everything from a large contact sheet to a thin, single strip of thumbnails. Make it as large or as small as you want — ThumbGrid allows you to plenty of flexibility, and you can augment the component with your own buttons to navigate the grid.
Think of ThumbGrid like a table element in HTML. When an HTML table is resized, the interior cells of the table expand and contract to maintain the number of rows and columns. ThumbGrid operates under a similar philosophy. No matter how wide, tall, or sub-divided you make the interface, you always have a "flush" layout of thumbnails that scale to fit the area.
When the component is on the Stage of your FLA, it displays the dimensions of each thumbnail image with two numbers separated by a forward slash. First number is width, second height. As you change the component size or other display parameters (more on those next), the live preview dimensions update automatically.
One of the quickest ways to change thumbnail image size is to alter the LAYOUT/Columns and LAYOUT/Rows parameters. Feel free to create however many rows and columns you want, though ThumbGrid will stop sub-dividing the interface if the total area of each thumbnail drops below an image width or height of 15 pixels plus the value of THUMB STYLE/Padding. In other words, if you have 5 pixels of padding assigned and the total width of the thumbnail falls below 20 pixels, ThumbGrid won't allow the setting and will instead use the maximum number of rows/columns that are possible at the component's dimensions.
The pixel width of the "gutter" that surrounds all your thumbnails is controlled with the LAYOUT/Spacing parameter. You may drop this number all the way down to 0 for a tight grid, if that's the look you're after. Increasing this reduces thumbnail image size, decreasing the opposite.
The pixel width of the area between your thumbnail images and their parent containers is controlled through the aforementioned THUMB STYLE/Padding parameter. Increasing this reduces thumbnail image size, decreasing the opposite.
Whichever options you choose for Direction and Order, ThumbGrid subdivides your thumbnails into groups to control overflow. The first group is what you see when the component loads (dark gray thumbs below), and any additional groups are positioned offscreen (light gray thumbs below). The user can then mouse over the component to view the additional groups, or you can provide your own buttons to control group viewing (as covered in the Interactivity section). The illustrations below show how Direction and Order work together:
