Grids allow content to be organized into rows and columns for presentational purposes. Responsive grid refers to the fact that the grid will automatically resize and realign to best fit the screen it is currently being displayed on (wide desktop, desktop, tablet, or mobile). It is important to understand that responsive grid will not guarantee that any two blocks will always remain on the same line at all screen sizes (indeed, when resizing down to mobile, the grid will almost always collapse to a single column layout).
There are four sizes of grid, reflecting the relative width of the blocks within the grid: x-narrow, narrow, wide, x-wide. If you're really curious to this in action take your browser window and compact it horizontally and you'll see the behaviors of the different sized grids in action!
[grid] Attributes:
- size: required; one of x-narrow, narrow, wide, x-wide
- Notice: The 'columns' and 'height' attributes are no longer available. These were from an older, non-responsive version of grids. The Web Team has updated all known instances of the old syntax to responsive grids or a more suitable alternative.
[gridblock] Attributes:
Example source code:
[grid size="wide"]
[gridblock title="One"]
is the loneliest number
[/gridblock]
[gridblock title="Two"]
is the loneliest number since the number one
[/gridblock]
[gridblock title="Three"]
is company
[/gridblock]
[gridblock title="Four"]
can't take any more
[/gridblock]
[gridblock title="Jackson Browne"]
is runnin' on empty
[/gridblock]
[gridblock title="Six"]
no throwin' bricks
[/gridblock]
[/grid]
The following are examples of the four sizes when a right sidebar is present.
Note: "wide" and "x-wide" are largely the same at the 960px layout, but for sites that support a 1200px layout, "wide" is three columns and "x-wide" is two columns at 1200px.
size="x-wide"
size="wide"
size="narrow"
size="x-narrow"
