Responsive Columns: Build Amazing Layouts With Custom HTML Tags

Container tag

The Responsive Column system uses tiny custom tags to make it simple, lightweight, and easy to use. The container tag is <r-c>.

'r-c' = Responsive Columns

The <r-c> container is used to group columns into sets. You can have as many columns in a set as you want.

Here's how it looks in HTML:

<r-c>
    <!-- columns go here -->
</r-c>

Column tags

There are 29 column tags in the Responsive Columns system, one for each unique column width. They use a simple naming convention so it's easy to remember.

There are eight base columns, plus 21 spanned columns, this gives a total of 29 column tags:

Here's how you add column tags to a set:

<r-c>
    <c1-3>1 of 3</c1-3>
    <c1-3>2 of 3</c1-3>
    <c1-3>3 of 3</c1-3>
</r-c>

'Gutter' mode

By default, Responsive Columns are in gutter mode. Gutter mode has the following properties:

• An outer margin
• Column gaps
• Row gaps
• No padding inside columns

Here's an example: (colors added)

<r-c>
    <c1-2>1</c1-2>
    <c1-2>2</c1-2>
    <c1-2>3</c1-2>
    <c1-2>4</c1-2>
</r-c>

'Join' mode

Switch to join mode by adding the join attribute to the column set container. Join mode has the following properties:

• No outer margin
• No column gaps
• No row gaps
• Padding inside columns

Here's an example: (colors added)

<r-c join>
    <c1-2>1</c1-2>
    <c1-2>2</c1-2>
    <c1-2>3</c1-2>
    <c1-2>4</c1-2>
</r-c>

<input checked type="radio" name="test" value="1">

Layout dimensions

Layouts using Responsive Columns consist of margins, gutters, and columns with padding.

By default, all white-space elements (margins, gutters, and padding) are given the same magic dimension to make them responsive:

calc(8px + 1.5625vw)

This formula automatically increases spacing based on the available screen width. As your screen gets larger, your margins, gutters, and padding will smoothly grow to perfectly balance the available screen real estate. The same formula works horizontally and vertically.

At critical screen resolutions the white-space dimension calculates to optimal pixel-widths that are easy to remember:

Want to know more about responsive whitespace? Check out my article: Responsive padding for all the details.

Wrapping columns

Columns automatically wrap to multiple rows if they add up to more than 100% of the available width.

You can use column wrapping to create multi-row layouts with a single set of columns:

<r-c join>
    <c1-1>Header</c1-1>
    <c2-3>Main</c2-3>
    <c1-3>Right</c1-3>
    <c1-1>Footer</c1-1>
</r-c>

Horizontally aligning columns

If a row of columns adds up to less than 100% of the available width, there will be a gap on the right side. We can change where this gap appears by horizontally aligning the columns. This is done by adding an alignment attribute to the column set container.

There are five horizontal alignment options:

Left aligned

This is the default alignment:

<r-c>
    <c2-6><br></c2-6>
    <c1-2><br></c1-2>
    <c3-5><br></c3-5>
</r-c>

Right aligned

Use the right attribute:

<r-c right>
    <c2-6><br></c2-6>
    <c1-2><br></c1-2>
    <c3-5><br></c3-5>
</r-c>

Centered

Use the center attribute:

<r-c center>
    <c2-6><br></c2-6>
    <c1-2><br></c1-2>
    <c3-5><br></c3-5>
</r-c>

Space between

Use the space-between attribute:

<r-c space-between>
    <c2-6><br></c2-6>
    <c1-2><br></c1-2>
    <c3-5><br></c3-5>
</r-c>

Spaced evenly

Use the space-evenly attribute:

<r-c space-evenly>
    <c2-6><br></c2-6>
    <c1-2><br></c1-2>
    <c3-5><br></c3-5>
</r-c>

Vertically aligning columns

When columns in a single row have different content heights, we can align them vertically. This is done by adding a vertical alignment attribute to the column set container. There are four options:

Stretched

This is the default vertical alignment, all columns are forced to become the height of the tallest column per row:

<r-c>
    <c1-3>A</c1-3>
    <c1-3>A<br>B<br>C</c1-3>
    <c1-3>A<br>B</c1-3>
</r-c>

Top

Use the top attribute:

<r-c top>
    <c1-3>A</c1-3>
    <c1-3>A<br>B<br>C</c1-3>
    <c1-3>A<br>B</c1-3>
</r-c>

Middle

Use the middle attribute:

<r-c middle>
    <c1-3>A</c1-3>
    <c1-3>A<br>B<br>C</c1-3>
    <c1-3>A<br>B</c1-3>
</r-c>

Bottom

Use the bottom attribute:

<r-c bottom>
    <c1-3>A</c1-3>
    <c1-3>A<br>B<br>C</c1-3>
    <c1-3>A<br>B</c1-3>
</r-c>

Stacking columns

Complex layouts don't have to be made in a single piece.

Rather than using one giant set of columns, you can break up your layout into manageable sets of columns that are stacked together vertically.

Here's an example of a layout made from three column stacks:

<!-- First stack -->
<r-c>
    <c1-4>
        Logo
    </c1-4>
    <c3-4>
        Menu
    </c3-4>
</r-c>

<!-- Second stack -->
<r-c>
    <c1-4>
        Left column
    </c1-1>
    <c2-4>
        Main column
    </c1-1>
    <c1-4>
        Right column
    </c1-1>
</r-c>

<!-- Third stack -->
<r-c>
    <c1-1>
        Footer
    </c1-1>
</r-c>

Nesting columns

Responsive Columns are compatible with nesting. Nesting is when you put sets of columns inside other columns.

Here's an example:

<r-c join>
    <c1-2>
        <p>Left column</p>
        <r-c join>
            <c1-2>1</c1-2>
            <c1-2>2</c1-2>
        </r-c>
    </c1-2>
    <c1-2>
        <p>Right column</p>
        <r-c join>
            <c1-2>A</c1-2>
            <c1-2>B</c1-2>
        </r-c>
    </c1-2>
</r-c>

You can nest columns as deep as you want.

Compact nesting

Compact nesting is when a column tag is also a column set container. By converting a column into a container you eliminate the need for an additional column set container, you add columns directly inside the column tag.

To convert a column into a container, just add the r-c attribute:

<r-c>
    <c1-2>1</c1-2>
    <c1-2 r-c>
        <c1-2>A</c1-2>
        <c1-2>B</c1-2>
        <c1-2>C</c1-2>
        <c1-2>D</c1-2>
    </c1-2>
    <c1-2>3</c1-2>
    <c1-2>4</c1-2>
</r-c>

You can easily create advanced layouts with simple nesting of columns.

Here's another example.

By nesting 6 columns in two side-by-side columns we create a 12 column grid: (rotate to landscape mode if you're on a mobile to see all 12 columns in a single row)

<r-c>
    <c1-1 sm1-2 r-c>
        <c1-6><br></c1-6>
        <c1-6><br></c1-6>
        <c1-6><br></c1-6>
        <c1-6><br></c1-6>
        <c1-6><br></c1-6>
        <c1-6><br></c1-6>
    </c1-1>
    <c1-1 sm1-2 r-c>
        <c1-6><br></c1-6>
        <c1-6><br></c1-6>
        <c1-6><br></c1-6>
        <c1-6><br></c1-6>
        <c1-6><br></c1-6>
        <c1-6><br></c1-6>
    </c1-1>
</r-c>

Breakpoints

In responsive design, a breakpoint is a 'point' where the layout adapts to changing conditions. Most commonly, breakpoints are set to specific screen widths.

The Responsive Columns system uses five standard breakpoints; extra-small, small, medium, large, and extra-large. Those sizes correspond to; mobile, tablet portrait, tablet landscape, desktop, and widescreen.

Each breakpoint is referred to by the standard two-letter size notation that you already know:

• xs = extra-small
• sm = small
• md = medium
• lg = large
• xl = extra-large

How to make columns responsive

By default, columns don't respond to breakpoints (they remain their specified width for all breakpoints). To change a column's width at a particular breakpoint, we add a width attribute.

Width attributes come in small, medium, large, and extra-large sizes. They are specified by the letters 'sm', 'md', 'lg', and 'xl' respectively.

Note: There are no extra-small width attributes because all columns start extra-small by default.

Here's the HTML of a column tag with small, medium, large, and extra-large width attributes added:

<c1-1 sm1-2 md1-3 lg1-4 xl1-5>...</c1-1>

This column will be:

• Full-width on extra-small screens (c1-1)
• Half-width on small screens (sm1-2)
• One-third-width on medium screens (md1-3)
• One-quarter-width on large screens (lg1-4)
• One-fifth-width on extra-large screens (xl1-5)

Example responsive layout

Here's a responsive layout using width attributes to specify breakpoints: (change the size of your browser window to see the layout adjust)

<r-c join>
    <c1-1>
        Header
    </c1-1>
    <c1-1 md2-3>
        Main column
    </c1-1>
    <c1-1 md1-3>
        Side column
    </c1-1>
    <c1-1>
        Footer
    </c1-1>
</r-c>

Reordering columns

Up to 8 columns within a column set can be reordered. To reorder a column, add an order attribute like this: md1. Order attributes consist of a two-letter size, followed by a single-digit order number.

• Two-letter size specifys the breakpoint (xs = extra-small, sm = small, md = medium, lg = large, xl = extra-large)
• Single-digit order number (numbers 1 - 8 only)

For example, a column with the md1 attribute will be reordered to the first position at the medium breakpoint.

Why reorder a column?

There are two main reasons why column reordering is sometimes necessary:

1. Columns need to move to a particular position to make a layout work.
2. You want the HTML of your most important content to come before any less important content in the source of your page (this is good for accessibility and SEO.)

Column reordering example

Below is a typical layout that many people want to use:

On mobile and tablet the main content comes first, but on a desktop, the main content comes after Col1.

We can move Col1 to the first position at the medium breakpoint by adding the md1 attribute. Col1 will stay first at the large and extra-large breakpoints because column orders automatically cascade to larger breakpoints.

Here's a working example: (resize your browser window to see the column reordering in action)

<r-c join>
    <c1-1 md1-2>
        Main
    </c1-1>
    <c1-1 sm1-2 md1-4 md1>
        Col1
    </c1-1>
    <c1-1 sm1-2 md1-4>
        Col2
    </c1-1>
</r-c>

Source ordering example

In this example, the main column comes after the side column but it's HTML is first in the page source.

<r-c join>
    <c2-3>Main column</c2-3>
    <c1-3 xs1>Side column</c1-3>
</r-c>

Putting your main HTML first is good for accessibility and SEO.

Shorthand column widths

It can look messy to repeat the same width attributes for an identical set of columns. Instead of repeating yourself, move the width attributes to the column set container so they are only listed once.

<r-c>
    <c1-1 sm1-2 md1-3 lg1-4 xl1-5>1</c1-1>
    <c1-1 sm1-2 md1-3 lg1-4 xl1-5>2</c1-1>
    <c1-1 sm1-2 md1-3 lg1-4 xl1-5>3</c1-1>
    <c1-1 sm1-2 md1-3 lg1-4 xl1-5>4</c1-1>
    <c1-1 sm1-2 md1-3 lg1-4 xl1-5>5</c1-1>
    <c1-1 sm1-2 md1-3 lg1-4 xl1-5>6</c1-1>
</r-c>

<r-c sm1-2 md1-3 lg1-4 xl1-5>
    <c1-1>1</c1-1>
    <c1-1>2</c1-1>
    <c1-1>3</c1-1>
    <c1-1>4</c1-1>
    <c1-1>5</c1-1>
    <c1-1>6</c1-1>
</r-c>

Semantic HTML tags

The Responsive Columns system encourages semantic HTML use.

As an alternative to the <r-c> custom tag, you can turn any standard HTML tag into a column set container by adding the data-r-c attribute.

Here's what that looks like:

<main data-r-c>
    <!-- columns go here -->
</main>

Child tags of a column set container automatically become a full-width column (<c1-1>) but you can change the default width by adding a column attribute, eg: data-c1-2.

• Change the two numbers in the column attribute to correctly size your column at the initial extra-small breakpoint.

(Refer to the complete list of attributes used in the Responsive Columns system.)

Here are two examples of using semantic HTML with Responsive Columns:

<main data-r-c>
    <header>
        Header
    </header>
    <section data-lg1-3>
        Section 1
    </section>
    <section data-md1-2 data-lg1-3>
        Section 2
    </section>
    <aside data-md1-2 data-lg1-3>
        Aside
    </aside>
    <footer>
        Footer
    </footer>
</main>

<ul data-r-c data-c1-2 data-md1-4 data-lg1-4>
    <li>
        1
    </li>
    <li>
        2
    </li>
    <li>
        3
    </li>
    <li>
        4
    </li>
    <li>
        5
    </li>
</ul>

Download the free poster!

Print out this handy poster and place it next to your computer so you can easily refer to it while coding. It lists all the tags and attributes and shows examples of how they're used.

Download Poster
(responsive-columns-poster.pdf 80k)

Customizing Responsive Columns

There are two main ways you can customize Responsive Columns to your exact needs; writing extra CSS, or editing the core Responsive Columns CSS.

Option 1. Writing extra CSS (recommended)

To change the style of containers or columns, just add a class to them, then write some extra styles for that class.

You might find it useful to add the following CSS classes to gain finer control of margins and padding:

/* Container margins */
.margin {
    margin:calc(8px + 1.5625vw);
}
.no-margin {
    margin:0;
}
.no-margin-sides {
    margin-left:0;
    margin-right:0;
}

/* Column padding */
.padding {
    padding:calc(8px + 1.5625vw);
}
.no-padding {
    padding:0;
}

Here are some more advanced customization examples:

Responsive grid of images

In the HTML we add a class of 'image-grid' to the column set container:

<r-c join c1-2 sm1-3 md1-4 class="image-grid">
    <figure>
        <img src="https://cdn.matthewjamestaylor.com/img/fractal-brush-strokes-small.jpg" width="300" height="225" alt="Brush strokes fractal image">
    </figure>
    <!-- include as many images as you need -->
</r-c>

And then write the styles for the 'image-grid' class. Here's the CSS:

.image-grid figure {
    margin:0;
    padding:0;
}
.image-grid img {
    display:block;
    width:100%;
    height:auto;
}

Responsive cards

In this example, I turn a simple list into a set of responsive cards:

• Card #1
  
  
  
  
• Card #2
  
  
  
  
• Card #3
  
  
  
  
• Card #4
  
  
  
  

Here's the HTML: (notice the 'special-cards' class)

<ul data-r-c data-sm1-2 data-md1-3 data-lg1-4 class="special-cards">
    <li>
        Card #1<br><br><br><br>
    </li>
    <li>
        Card #2<br><br><br><br>
    </li>
    <li>
        Card #3<br><br><br><br>
    </li>
    <li>
        Card #4<br><br><br><br>
    </li>
</ul>

And here's the CSS:

.special-cards { /* container */
    list-style:none; /* remove default list styles */
    margin:0;
    padding:calc(8px + 1.5625vw);
    text-align:center;
    background:linear-gradient(0deg, #63d4ff 0%, #2490ff 100%);
}
.special-cards > * { /* columns */
    background:#fff;
    background:linear-gradient(0deg, #fff 0%, #f1f1f1 100%);
    border-top:1px solid #fff;
    border-bottom:1px solid #999;
    border-radius:3px;
    box-shadow:0 0 10px rgba(0, 0, 0, 0.2);
}

Want more layout demos? Check out my example page layouts and column sets that have multiple layout variations and special designs:

Full page layouts

• Holy grail layout
• Left sidebar layout
• Right sidebar layout

Column sets

• 1 column layouts
• 2 column layouts
• 3 column layouts
• 4 column layouts
• 5 column layouts
• 6 column layouts
• 7 column layouts
• 8 column layouts

Option 2. Editing the core Responsive Columns CSS

If you need to update the default gutter width, add support for extra columns, or if you just want to tinker with the main structure of the system, then you can edit the core Responsive Columns CSS. This is obviously for advanced (or curious) users only.

Download the demo files and start editing.

Have you created something interesting? Tell me, I want to know! =)

Attributes list

Here's a complete list of attributes used in the Responsive Columns system:

Browser support

Responsive Columns works in all modern browsers, plus all old browsers that support Flexbox:

• Google Chrome 29+
• Mozilla Firefox 28+
• Microsoft Edge 12+
• Apple Safari 9+
• Opera 17+
• Android Browser 4.4+
• Opera Mobile 12.1+
• Chrome for Android
• Firefox for Android
• Opera Mini

If you find any browser-specific bugs, please let me know.

FAQs

Feedback

Have you found a bug, or have a feature request? Let me know.

If you're using Responsive Columns in production, then I'd like to know, I may showcase your website here.

Download the Demo Files

Download
(responsive-columns.zip 155k)