NOTE:

On most of our pages (if not every page) we use the article element that wraps our sectioned content. Article has the class grid-container which is divided into 14 columns — the first and last columns are used for spacing and everything inside article starts at grid-column 2.

Sub sections of article is where we'll be implementing our grid container and grid children to get are various looks and layouts.

Important: Compared to the previous cfa-grid-col-{start}-{end} API, this grid is fully responsive. Previous behavior would change all grid children to full width on small screens. This grid will allow for full layout control across breakpoints.

Grid Containers

// Typical article grid
article.grid-container {
    // Contains 14 columns
}

// All other grids
*.grid-container {
    // Contains 12 columns
}

// Allows for *.grid-container to be used as main page content
// if an article tage is not appropriate
*.main-grid-content {
    // This will span the main grid's 14 columns
    // and add padding to the child element
}
                    

Grid Children

Grid children must be container elements, which will nearly always be a <div />.

Column assignments follow the pattern: cfa-grid-col[-{breakpoint}]-{column span} and are optionally positioned with the pattern: cfa-grid-col[-{breakpoint}]-start-{column start}.

Valid breakpoints are: xs, sm, md, lg, xl, corresponding respectively to: default/phone, large phone, tablet, large tablet/desktop, large desktop.

• Non responsive layout
  cfa-grid-col-4

  cfa-grid-col-6 cfa-grid-col-start-7
• Responsive Layout
  cfa-grid-col-4 cfa-grid-col-md-6 cfa-grid-col-lg-12

  cfa-grid-col-6 cfa-grid-col-md-6

Formatting

There are few helper classes for spacing between items in the grid. (NOTE: all gaps are 1.5rem [24px].)

• gap class creates a gap for grid columns and rows.
• column-gap class creates gap between grid columns.
• row-gap class creates gap between grid rows.

Note

Inline styles in this example are only to show the flex box behavior, they should not be included in usages. In most cases, a flex container will not be necessary.

When to Use a Flex Container

When a grid element needs to be positioned within the grid in a manner other than the natural flow of the document. For example: when needing to center an element on screen, centering content between n-number of grid columns, etc.

How to Use a Flex Container

A flex container should be the immediate child of a grid container such as:

                        div.grid-container
                            div.flex-container.flex-justify-content-center
                                div // item to be centered
                    

Formatting

There are few helper classes for spacing between items in the flex container. (NOTE: all gaps are 1.5rem [24px].)

• gap class creates a gap for columns and rows.
• column-gap class creates gap between columns.
• row-gap class creates gap between rows.