This is documentation for Mathematica 6, which was
based on an earlier version of the Wolfram Language.
 Mathematica Tutorial Functions »

# Grids, Rows, and Columns in Mathematica

## The Basic Constructs

Mathematica provides a broad range of powerful constructs for laying out content on a screen or page. They are designed to be immediately useful for the beginner, yet also allow fine control over almost every aspect of their appearance.

These constructs can be placed into three families: constructs that appear within notebooks as typesetting structures; functions that generate graphics whose contents are arranged on a grid; and constructs that can appear inside grids to adjust details of formatting.

Grid, Column, and Row form the first family, referred to in this tutorial as the Grid family. The Grid family's defining characteristic is that it is a tightly integrated part of Mathematica's typesetting system. This means that any expression whatsoever can appear as content, and that the construct itself can respond to changes such as window width or even the size of its elements. Like other typesetting constructs, the Grid family's members are inert declarative descriptions and do not evaluate to some other form.
A parallel set of constructs—the Graphics Grid family—exists specifically for generating graphics, with the individual graphical elements arranged in a grid. These constructs are GraphicsGrid, GraphicsColumn, and GraphicsRow. Though graphics can be used in the Grid family, the Graphics Grid family supports sizing and editing behavior more tailored to graphics. The Graphics Grid family has functions that take arguments and evaluate them into new graphics expressions, which means it is difficult to make the generated grid respond to changes in its environment, but easy to interactively add arbitrary annotation and additional graphics.
The final family—the Embedded Constructs family—consists of constructs that are embedded within the grids themselves, and alter the grid's appearance from within. Item can be wrapped around elements in a grid in order to style the region in which they appear. SpanFromLeft, SpanFromAbove, and SpanFromBoth are used to create regions that span across multiple rows or columns.
Some very basic examples of all of these constructs follow.

### Grid Family

 Grid[{{expr11,expr12,...},{expr21,expr22,...},...}] an object that formats with the exprij arranged in a two-dimensional grid Column[{expr1,expr2,...}] an object that formats with the expri arranged in a column, with expr1 above expr2, etc. Row[{expr1,expr2,...}] an object that formats with the expri arranged in a row, potentially extending over several lines

The Grid family of 2D formatting constructs.

A grid of elements.
 Out[684]=
A column of elements.
 Out[686]=
A row of elements.
 Out[685]=

### Graphics Grid Family

 GraphicsGrid[{{g11,g12,...},...}] generates a graphic in which the gij are laid out in a two-dimensional grid GraphicsColumn[{g1,g2,...}] generates a graphic in which the gi are laid out in a column, with g1 above g2, etc. GraphicsRow[{g1,g2,...}] generates a graphic in which the gi are laid out in a row

The Graphics Grid family of 2D graphics layout functions.

Display elements in a graphics grid.
 Out[678]=
Display elements in a graphics column.
 Out[689]=
Display elements in a graphics row.
 Out[691]=

### Embedded Constructs Family

 Item[expr,options] displays with expr as the content, and with the specified options applied to the region containing expr SpanFromLeft indicates that the position is occupied by the contents on the left SpanFromAbove indicates that the position is occupied by the contents above SpanFromBoth indicates that the position is occupied from both above and left

Constructs with special meaning when they are embedded as elements within the Grid and Graphics Grid families.

Embed styling information around the element "a".
 Out[708]=
Span "a" across the first two columns.
 Out[709]=
Span "a" across the first two rows.
 Out[710]=
Span "a" across the first two columns and rows.
 Out[711]=

## Classes of Functionality

Grid and related constructs allow considerable appearance customization, often with very little syntax. The tables below indicate the kind of functionality that is supported; it is explained in detail in later sections.

• Frames and dividers can be placed in any position to partition regions of the grid.
• The grid and its contents can be aligned and positioned in a number of ways.
• Backgrounds and styles can be imposed on any region.
• The structure can be elaborated using spanning elements, or elements that are themselves grids.
• The sizes and spacings in the grid can be adjusted.

In addition to these styling features, various forms of interactive editing and dynamic behavior are possible.

## Options Syntax

All options can accept a single value to be used throughout the entire grid. Many options also allow a finer level of granularity, making it possible to have, for example, a different background for every column in the grid. The current section describes the general syntax for describing option values at the row, column, and item level. The subsequent section will describe specifics relevant to the different options.

The overall syntax for options such as Alignment and Background is based on forms like Background->{specx, specy}, where specx is itself a modular syntax that contains values for different columns, while specy contains values for the different rows.

 spec apply spec to all items {specx} apply specx at successive horizontal positions {specx,specy} apply speck at successive horizontal and vertical positions {specx,specy,rules} also allow explicit rules for individual i, j elements

General options syntax.

specx (columns), and specy (rows) are both syntax than can range from very simple to highly detailed, according to two methods described below. The first method is to just give rules for the desired value at a set of indices. The second is based on giving a sequence of values in a list.
A set of rules specifying the index of a column and its desired background.
 Out[8]=
An equivalent list of background values to use for successive columns.
 Out[9]=

These two methods have different strengths, as described below.

### Using Rules

Rules provide a direct and readable method to give a specific row or column a specific value.

Set the background for specific sets of columns.
 Out[16]=
Set the background for specific sets of rows.
 Out[26]=

When there are a large number of rows or columns, rules are a convenient way to set the properties of just a few of them.

Apply the option at a small number of the possible positions.
 Out[25]=

Rules can also be used to give values to specific grid elements or subregions. Note however that while conceptually similar, this following syntax is separate from the discussion of specx and specy.

Set the background of the {3, 3} element.
 Out[27]=
Set the background of the region from element {1, 1} to {3, 3}.
 Out[28]=

Rules are an efficient way to specify the exceptions to the value that otherwise exists. However, they are less efficient when the intention is to manually specify a value for each piece of the grid.

Manually specify an alternating pattern using rules.
 Out[31]=

To achieve repetitive patterns, it is instead recommended to use the list syntax described in the next section.

### Using Lists

Giving sequential values in a list is a compact and convenient way to specify large numbers of option values for adjacent rows or columns.

List the values to be used for successive columns.
 Out[52]=

Additionally, sublists can be used to denote cyclic use of values.

Specify that the list should be used cyclically.
 Out[53]=

These cyclic sublists can be padded at the beginning or end.

Give an initial set of values before the cyclic portion.
 Out[58]=
Give a final set of values.
 Out[57]=
Use defaults in the middle.
 Out[60]=

Because positions in the list correspond to positions in the grid, specifying a single value in the middle requires giving all previous values. To achieve this more directly, use rules as described in the above section.

Make the fifth column red using the list syntax.
 Out[61]=
Use a rule to directly assign the background.
 Out[62]=

### Using Both

It is possible to have the best of both worlds, using the list syntax for specifying repetitive portions of the grid while also using the rule syntax to specify exceptions.

Columns alternate between blue and green, except the first and last which are red.
 Out[746]=
Use blue for all columns, except the first and fifth.
 Out[89]=
 {s1,s2,...,sn} use s1 through sn; then use defaults {{c}} use c in all cases {{c1,c2}} alternate between c1 and c2 {{c1,c2,...}} cycle through all ci {s,{c}} use s, then repeatedly use c {s1,{c},sn} use s1, then repeatedly use c, but use sn at the end {s1,s2,...,{c1,c2,...},sm,...,sn} use the first sequence of si at the beginning, then cyclically use the ci, then use the last sequence of si at the end {s1,s2,...,{},sm,...,sn} use the first sequence of si at the beginning and the last sequence at the end {i1->v1,i2->v2,...} specify what to use at positions ik {spec,rules} use rules to override specifications in spec

Summary of syntax for specx and specy.

## Columns, Rows, Gutters, and Items

As introduced in the previous section, Mathematica provides a flexible language for adjusting the details of a grid's formatting. This section provides context for that language and elaborates on the finer distinctions.

Vocabulary for grids.

 column vertical sequence of items row horizontal sequence of items item the region containing a grid element gutter the border between consecutive rows or columns

Different slices of a 2D grid.

Grid and GraphicsGrid follow the same conventions for describing the different possible slices of the grid. Column, GraphicsColumn, and GraphicsRow follow the same general conventions, except that they only deal in one of the two possible dimensions. Finally, Row does not participate in this system at all.

### The World of Options

The following table describes for which slices each option can address. No option is valid for all constructs; refer to the key below to see which option can occur for a given construct.

Note that Row does not take any options.

### Columns, Then Rows

To remember the syntax for options, the most important step is knowing that specific values for the columns are specified first, and values for rows are specified second.

 opt->val use val for all items opt->colspec,rowspec} use colspec for columns, rowspec for rows opt->{colspec} use colspec for columns, defaults for rows

Option structure for Grid and GraphicsGrid.

To understand and remember this convention it is useful to examine how it relates to other precedents in Mathematica.

In Mathematica, options with a horizontal setting h and a vertical setting v are specified as opt->{h, v}.

In a grid, these horizontal and vertical settings correspond to values for the columns and rows, respectively. This is because columns are stacked horizontally, and so their properties—such as width and location—correspond to the horizontal dimension. Rows are stacked vertically, and their properties correspond to the vertical dimension.

A graphic that is twice as long as it is tall.
 Out[37]=
In the following grid each item is 2 "ems" wide and 1 "ex" tall.
 Out[1]=
Instead of a single width for all columns, a separate setting is given for each column.
 Out[29]=
 Out[2]=
Similarly, a different background color can be given at successive horizontal positions.
 Out[6]=

### Gutters

Many Grid options deal with properties that can ultimately be associated with a column, row, or item in the grid.

However there are also options that deal with gutters between rows and columns.

 Dividers where to draw divider lines in the grid Spacings horizontal and vertical spacings

Options for the gutters between rows and columns.

A line that is not associated with any single row or column.
 Out[85]=
Compare this with a frame.
 Out[86]=

The syntax for Dividers and Spacings is exactly the same as for the other options. For a grid with n items in a particular direction, Dividers and Spacings can specify settings for the n+1 gaps between elements, starting before the first elements and ending after the last element.

### Items

The most granular level of description is the item. Each item in a grid can have its own value for options such as Background, Alignment, and Frame.

Item can be used to explicitly indicate the desired settings.
 Out[100]=
Alternatively, use the item's {i, j} index to assign it a value at the overall grid level.
 Out[101]=
A programmatically generated grid.
 Out[103]=
Give settings to an entire region of the grid.
 Out[105]=
 Out[109]=

## Dividers and Frames

Mathematica provides an extensive system for describing what dividers and frames should be drawn in a grid.
 Dividers draw dividers between columns or rows Frame put a frame around regions of the grid FrameStyle use an overall style for the lines

Options for drawing dividers and frames.

Use Frame to put lines on all four sides of a region or set of regions.
 Out[131]=
Highlight specific columns or rows.
 Out[141]=

Frame always draws a line on all four faces of the enclosed region. Dividers allows a finer level of control.

 Out[140]=

One result is that when using dividers, the resulting lines run in only a single direction.

 Out[147]=
 Out[146]=
This short form draws the center dividers.
 Out[150]=

### Styling Dividers and Frames

FrameStyle sets the base style used for both Frame and Dividers.
 Out[94]=
 Out[95]=
Frame and Dividers allow styles as values.
 Out[50]=
 Out[48]=

### Precedence

When conflicting styles are given, Dividers has precedence over Frame, and they have precedence over FrameStyle.

Dividers and frames are added together.
 Out[177]=
Styles from different sources are combined together.
 Out[185]=
Styles specified in Item always override all others.
 Out[186]=

## Alignment and Positioning

Aesthetic grids often require use of alignment. Mathematica has considerable support for different kinds of alignment in grids.
The Alignment option can be passed to the overall grid.
Align contents to the right.
 Out[53]=
It is possible to give different horizontal alignments to different columns, and different vertical alignments to different rows.
Align the first column to the right, the second column to the left.
 Out[61]=
It is also possible to give different alignments to the individual items in the grid.
Set the {1, 1} element to the left, the {1, 2} element to the right.
 Out[62]=
Alignment can also be set with Item. The specification for Item will take precedence.
 Out[63]=
It is possible to align on a decimal point, or any character.
Align on ".".
 Out[65]=
Positioning a grid within its enclosing environment can be achieved with BaselinePosition.
Default position.
 Out[67]=
Align the bottom of the grid to the baseline of the enclosing expression.
 Out[73]=
Align the grid so that the baseline of the {2, 1} element is at the overall baseline.
 Out[74]=

## Background and Style

### Common Cases

When working with a collection of elements, Grid provides a way to set them against a uniform background.

Though elements can have their own background, awkward gaps result when you just put them together.

 Out[193]=

Grid and related functions place a background across the entire group of items in which the elements are contained.

 Out[194]=

With more sophisticated syntax, a variety of patterns is easy to achieve.

Alternate the backgrounds.
 Out[195]=
 Out[196]=
Highlight a row and column that intersect.
 Out[197]=
Embed the background with a particular item inside the grid.
 Out[107]=

### Precedence of Overlapping Background Settings

Backgrounds given in the list syntax blend together upon intersection.
 Out[198]=
Backgrounds specifically asserted using indices take precedence.
 Out[199]=
Indexed columns take precedence over indexed rows.
 Out[200]=
Backgrounds specified with Item have the highest precedence.
 Out[201]=

## Spanning and Nesting

Sophisticated partitioning of 2D space can be achieved by nested grid constructs and/or by using spanning elements.
As their name suggests, spanning elements allow an item to span multiple columns, rows, or both.
Span "a" across the first two columns.
 Out[709]=
Span "a" across the first two rows.
 Out[710]=
Span "a" across the first two columns and rows.
 Out[711]=
It is important to note that the spanning region must be rectangular; items that fail to fall within the rectangle will not be spanned, and will instead display the spanning character.
Spanning is only done in rectangular chunks.
 Out[75]=
While many layouts can be achieved using spanning elements, it is sometimes faster or more convenient to simply nest grid constructs.
 Out[81]=
 Out[84]=
Particularly with complex grids, it is often clearer to use Row and Column to create the specifically desired structures than to try to design a complicated system of spanning.

## Sizing and Spacing

### Sizing in Grid

Grid will typically not modify the size of its elements. Also, rows and columns are by default made as narrow as possible while accommodating the contents.

 Out[275]=

Notice in the above example that the second row is much taller than the first, the second column thinner than the first, and the sizes of the elements were not modified in any way.

If elements in the grid are interactively or dynamically changed, the size of the entire grid will be adjusted appropriately.

A useful exception is that Button will by default expand to fill the available space.

 Out[277]=

ItemSize can be used to override the default behavior.

Make all items the same size.
 Out[278]=
Specify widths and heights for individual columns and rows.
 Out[256]=

The units used for ItemSize are the typesetting units known as "exs" and "ems."

It is also possible to specify widths as a fraction of the enclosing area by using Scaled.

Make the first two columns each .3 of the page width.
 Out[274]=

#### Line Wrapping in Grid

Textual items will line wrap if the columns are too narrow. Notice that this forces the rows to be taller that the minimum specified.

 Out[266]=
With , textual items are wrapped at the page width.
 Out[271]=
With , line breaking is prevented.
 Out[273]=

### Sizing in GraphicsGrid

GraphicsGrid will by default return a grid whose items are all the same size.

 Out[289]=

It will automatically choose an aspect ratio that is appropriate for the overall collection of elements.

Compare this with the equivalent Grid example, which does not impose either an overall size or an aspect ratio.

 Out[290]=

GraphicsGrid does not support an ItemSize option, but it does support ImageSize.

 Out[294]=