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. Sometimes, 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 - a type of CMS Short Code used to divide a page into regular blocks of content.

Usage

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 columns of 20% width. A block can span multiple columns. See examples to get an idea of possible layouts.

There are five grid styles available:

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

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. The 2018 International Nights Video performances page is an example of a video grid.

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.

When there is not enough space on a visitors device to show the content in a grid side-by-side, the blocks will show sequentially. You can see how this will look by using the Preview... button, and selecting Small .

Regularly Sized Content

Two Column Example (with videos)

Above example coded as

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

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

Three Column Example (with images)

Above example coded as

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

![description](images/source.jpg)

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

Four Column Example (with images)

Above example coded as

[​[.four-by]]
![Inspired by Discovery](images/admissions/inspired/discovery-diamond.png)

![Inspired by the Aina](images/admissions/inspired/aina-diamond.png)

![Inspired by You](images/admissions/inspired/you-diamond.png)

![Inspired by Each Other](images/admissions/inspired/each-other-diamond.png)
[​[/.four-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.

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.

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.

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:

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

Spanning Multiple Grid Columns

Within a grid, it is possible to have a block that spans multiple columns. That can be done by attaching an .x2, .x3, or .x4 class to a [​[.block]] container.

The following code creates a three column grid with a block spanning the first two columns.

Two By Example

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

Four By Example

Five By Example

Nested Grid Example

It is possible to create complicated layouts using grids, including grids within grids. Consider the following example, which has a two-by grid, contained within another two-by grid: