Understanding the 12 Column Grid

At the heart of many responsive web design frameworks, including Flexible.gs, is the concept of a grid system. Most commonly, this is a 12-column grid. This page explains why 12 columns are so versatile and how to use them with Flexible.gs.

Why 12 Columns? The Power of Divisibility

The number 12 is highly divisible, making it an excellent choice for creating a wide variety of layouts. It can be evenly divided by 1, 2, 3, 4, 6, and 12. This means you can easily create layouts such as:

A single full-width column (12/12)
Two equal columns (6/12 + 6/12)
Three equal columns (4/12 + 4/12 + 4/12)
Four equal columns (3/12 + 3/12 + 3/12 + 3/12)
Six equal columns (2/12 + 2/12 + 2/12 + 2/12 + 2/12 + 2/12)
Combinations like one larger column and one smaller (e.g., 8/12 + 4/12, or 9/12 + 3/12)

This flexibility allows designers and developers to craft diverse and balanced page structures that adapt well to different content needs and screen sizes.

Using Columns in Flexible.gs

Flexible.gs provides intuitive CSS classes to define column widths within a .row. These classes are typically structured as .col-{breakpoint}-{size}:

{breakpoint}: Indicates the screen size target (e.g., sm, md, lg). If omitted, it usually applies to the smallest screens (xs) upwards.
{size}: A number from 1 to 12, representing how many of the 12 available grid units this column should span.

For example, .col-md-6 means the column will take up 6 out of 12 units (half the row width) on medium screens (md) and larger, unless overridden by a class for a larger breakpoint like .col-lg-4.

Remember, Flexible.gs follows a mobile-first approach: styles for smaller breakpoints apply to larger ones unless explicitly overridden.

Basic Layout Examples

Example 1: Two Equal Columns

To create two columns that are each half the width of the row on medium screens and up (stacking on smaller screens):

50% (md-6)


  
    Left Column Content
    Right Column Content

On screens smaller than the md breakpoint, these columns would typically stack and each take up 100% width (like .col-12 or .col-sm-12 by default).

Example 2: Three Equal Columns

For three columns, each one-third of the row width on large screens and up:

33.3% (lg-4)


  
    Column A
    Column B
    Column C

Example 3: Main Content and Sidebar (Asymmetric)

A common layout with a wider main content area and a narrower sidebar on medium screens and up:

66.6% (md-8) Main

33.3% (md-4) Sidebar


  
    Main Content Area
    Sidebar Area

Responsive Column Combinations

The real power comes from combining classes for different breakpoints to create truly adaptive layouts.

Consider a layout that is:

Full width on extra-small screens (default stacking).
Two equal columns on small screens (sm).
A main content area (8 units) and a sidebar (4 units) on medium screens (md).
Three equal columns on large screens (lg).

Item 1 (lg-4, md-8, sm-6)

Item 2 (lg-4, md-4, sm-6)

Item 3 (lg-4, md-12, sm-12)


  
    Item 1
    Item 2
    Item 3

Nesting Columns

For more intricate layouts, Flexible.gs likely allows you to nest a new .row and its columns inside an existing column. This nested row will then also operate on a 12-column basis relative to its parent column's width.

Refer to the Examples Page for a demonstration of nested columns.

Key Takeaways

The 12-column grid offers exceptional layout flexibility.
Use .row to group horizontal sets of columns.
Use .col-{breakpoint}-{size} classes to define column widths.
Combine breakpoint classes for responsive behavior across devices.
Always ensure your columns are direct children of a .row.

Experiment with different combinations on the Responsive Test page to master the 12-column grid with Flexible.gs!