Multi Columns / Grid Generator

Overview

The grid generator for the Sunday theme is available here: http://myccc.monkpreview3.com/grid-generator/. Use your domain when your site goes live.

You can create a multi-column layout in the content area of pages and content sections by using custom classes and div tags.  We have created a grid generator to make this process easier to use.

  1. The grid generator is located at /grid-generator/
  2. Select the number of rows and then the column layout for each row. This will produce a code snippet that you can place into the editor of your page or content section
  3. Copy the code snippet and go to your page in the CMS.  You will need to use the html view option and paste in the code to the desired location.
  4. Switch to edit view and you can update the example content as needed (the grid generator will place a dummy image and text as a placeholder).

You can view an example of the multi-column setup on your style guide page.

There are a number of example sections available with preset column structures using the grid generator tool. Feel free to copy these example sections and use the existing column structure for your own content.

Note - If you would like to display an image inside a column at fullwidth of the column container you can add the class "responsive image" to the image tag.