Page Layout using Grids

Content in web pages flows to fit the size of its container. Most of the time, this is the width of page.
Someteimes, it is helpful to have fine-grained control over the layout of a page. In the UH Hilo CMS, this can be done using Grids. Grids areCMS Short Codes that divide a page into regular blocks of content.

The grids come in several sizes, based on page widths. A two-by grid splits the content area into two halves, and a five-by grid slices it into blocks of 20% width.

Usage

There are five grid styles available:

[​[.two-by]]

[​[.three-by]]

[​[.four-by]]

[​[.five-by]]

[​[.six-by]]

Each of these must be paired with a closing tag (with a slash, before the named style):

[​[/.two-by]]

[​[/.three-by]]

[​[/.four-by]]

[​[/.five-by]]

[​[/.six-by]]

All of the content in between the opening and closing grid style tag will be split into regular sized 'chunks'. If your content is all of a regular size (i.e. video, image grids), this is sufficient.

Grid Usage Examples - Regular content

Above example coded as

[​[.two-by]]
[​[EMBED ... ]]
[​[EMBED ... ]]
[​[/.two-by]]

Wonton

Tofu

BBQ

Above example coded as

[​[.three-by]]
![description](images/source.jpg)

![description](images/source.jpg)

![description](images/source.jpg)
[​[/.three-by]]

Centering Content within a Grid Container

Content with a grid block can be centered, by appending a .center style to the opening grid tag. The .center is daisy-chained to the end of the grid style, with a . separator.

Above example coded as

[​[.five-by]]
[Button 1](/help/cms/grids.php#center){.button}

[Button 2](/help/cms/grids.php#center){.button.info}

[Button 3](/help/cms/grids.php#center){.button.warning}

[Button 4](/help/cms/grids.php#center){.button.success}

[Button 5](/help/cms/grids.php#center){.button.error}

[​[/.five-by]]

vs.

Above example coded as

[​[.five-by.center]]
[Button 1](/help/cms/grids.php#center){.button}

[Button 2](/help/cms/grids.php#center){.button.info}

[Button 3](/help/cms/grids.php#center){.button.warning}

[Button 4](/help/cms/grids.php#center){.button.success}

[Button 5](/help/cms/grids.php#center){.button.error}

[​[/.five-by]]


Grids Containing Text

In the CMS, there is an 'Insert table or grid' button that contains an option to insert a .two-by or a .three-by grid into a page. Choosing either of those options will insert a dummy grid containing only text elements. In addition to the opening and closing grid tags, it will also add a number of paragraphs (in latin), each enclosed within an opening and closing [​[.block]] tag. Replace this with your desired content.

Options available upon pressing 'Insert Grid' button Sample code to be inserted

[​[.two-by]]
[​[.block]]
Column 1 content. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
[​[/.block]]
[​[.block]]
Column 2 content. Aliquid amet asperiores consectetur culpa debitis deserunt distinctio dolores enim esse.
[​[/.block]]
[​[/.two-by]]

What is the [​[.block]] Container?

The [​[.block]] and [​[/.block]] tags are an empty vessel. They serve to combine multiple other elements into a single element. For example, a [​[.block]] might contain a #​# Heading and several paragraphs or a bulleted list. While [​[.block]] does not have any styles by itself, additional styles can be attached.

An example of two-by and three-by grid syntax, and the rendered content
In this example, a three by grid containing different sized blocks of content shows up as three equal width columns.

Aligning Content to the Top of a Block

In addition to .center, there is a style called .align-top, that can be attached to the containing grid style - i.e. [​[.two-by.align-top]]. The .align-top will make sure that the content within blocks in this grid are aligned with the top of the grid row, ignoring any default margins. This can be useful if the content within the boxes is dissimilar - i.e. paragraphs of text next to headings.

An example of two-by.align-top syntax, and the rendered markdown example
In this example, the .align-top style has been applied to the first grid, and has not been applied to the second grid. Lines are dashed to show alignment

Background Color and Padding

Two additional styles can be attached to an X-by grid that containing [​[.block]] elements. The .padded style, daisy-chained to the containing grid style - i.e. [​[.two-by.padded]] - increases the amount of spacing around the contents of each [​[.block]]. This can make dense blocks of content easier to read.

Four background colors are available for the [​[.block]] elements:

.info

.warning

.success

.error

To can be attached to the containing grid, - i.e. [​[.two-by.info]] - will make the blocks within this grid each have a background color corresponding with the named style. This can be a way to make content stand out on a page.

Grid Examples

Two By Example

Column 1 content.

Column 2 content.


For three-by grids and above, the classes: .x2, .x3 and .x4 can be applied to a [​[.block]], making it span multiple columns in the grid. Examples below:

Three By Example

Column 1 content.

Column 2 content.

Column 3 content.

Column 4+5 content. This block contains the .x2 style, making it twice the width.

Column 6 content.

Four By Example

Column 1 content.

Column 2 content.

Column 3 + 4 content. This block contains the .x2 style, making it twice the width.

Column 5 + 6 + 7 content. This block contains the .x3 style, making it three-times the width.

Column 4 content.

Five By Example

Column 1 content.

Column 2 content.

Column 3 + 4 content.

This block contains the .x2 style, making it twice the width of a single block.

Column 5 content.

Column 6 + 7 + 8 content.

This block contains the .x3 style, making it three-times the width of a single block.

Column 9 content.

Column 10 content.

Column 11 + 12 + 13 + 14 content.

This block contains the .x4 style, making it four times the width of a single block.

Column 15 content.