Matthew James Taylor Matthew James Taylor

Web design ›

Responsive Attributes: Generate CSS Grid Layouts With Simple HTML

14 Mar 2023 — Updated 5 Feb 2024

It's So Easy To Create Responsive Layouts:

How responsive attributes code works
responsive attributes 4-column layout

Add Responsive Attributes To Your Project For FREE!

Less than 1kb of CSS! (minified and gzipped) Free Download

Fully Responsive CSS Grid Layouts

Breakpoints

Responsive Attributes uses three standard breakpoints; small (sm), medium (md), and large (lg). These sizes correspond to; mobile, tablet, and desktop devices.

Size Min-width Max-width
Small (mobile) (no min) 767px
Medium (tablet) 768px 1023px
Large (desktop) 1024px (no max)

Breakpoints are easy to customize. Download the source CSS and edit the breakpoint values.

Data-attributes

On the grid container, add your rules as a space-separated list inside the data-attribute for each breakpoint:

<div
    data-sm="<!-- mobile rules here -->"
    data-md="<!-- tablet rules here -->"
    data-lg="<!-- desktop rules here -->"
    >
    <!-- columns here -->
</div>

8 Base Columns

1
2
3
4
5
6
7
8

Wrapping

1
2
3
4

Columns automatically wrap to multiple lines if the number of columns per row is exceeded.

<div data-sm="2column">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

Wrapping notes

  • Wrapping columns is an excellent way to create grids of content.
  • There is no limit to the number of rows you can use within each grid container.

Order

1
2
3
4

Change the order of columns with the order rules (order1order8). In the example above, column 2 has been moved first.

<div data-sm="2column">
    <div>1</div>
    <div data-sm="order1">2</div>
    <div>3</div>
    <div>4</div>
</div>

Ordering notes

  • You can only move columns to positions 1 to 8.
  • You must order every column from 1 to the highest order you need (eg: If you move a column to position 3 you must also specify the order for columns 1 and 2.)

Colspan

A
B
C

Span columns with the colspan rule (colspan1colspan8).

<div data-sm="2column">
    <div data-sm="colspan2">A</div>
    <div>B</div>
    <div>C</div>
</div>

Rowspan

A
B
C

Span rows with the rowspan rule (rowspan1rowspan8).

<div data-sm="2column">
    <div data-sm="rowpan2">A</div>
    <div>B</div>
    <div>C</div>
</div>

Nesting

1A
1B
1C
1D
2
3
4

Put sets of columns inside other columns to any depth you need, this is called nesting. Nesting is an excellent way to create advanced layouts, for example; creating more than 8 columns.

<div data-sm="2column">
    <div data-sm="2column">
        <div>1A</div>
        <div>1B</div>
        <div>1C</div>
        <div>1D</div>
    </div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

Stacking

1
2
A
B
C
i
ii
iii
iv

Build up advanced layouts by stacking column sets on top of one another.

<!-- first stack -->
<div data-sm="2column">
    <div>1</div>
    <div>2</div>
</div>

<!-- second stack -->
<div data-sm="3column">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

<!-- third stack -->
<div data-sm="4column">
    <div>i</div>
    <div>ii</div>
    <div>iii</div>
    <div>iv</div>
</div>

Gutters (Gaps Between Grid Columns)

Standard-sized gap

1
2
3
4

Add horizontal and vertical gaps between your columns (column-gap and row-gap) with the gap rule. Add this rule to the data-attribute that corresponds to your desired breakpoint:

<div data-sm="2column gap">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

Double-sized gap

1
2
3
4

For larger gaps (twice the size) use the gap2 rule:

<div data-sm="2column gap2">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

Responsive gaps

The Responsive Attributes system uses my special formula to make gaps respond to your screen size.

/* standard-sized gap */
gap:calc(8px + 1.5625vw);

/* double-sized gap */
gap:calc((8px + 1.5625vw) * 2);

Read my article: Responsive Padding, Margin & Gutters With CSS Calc to see how it works.

Responsive gap sizes per screen width

Screen width gap gap2
320px (eg: iPhone 4 & 5) 13px 26px
360px (eg: Galaxy S5) 14px 28px
375px (eg: iPhone 6, 7, & 8) 15px 30px
480px 16px 32px
768px (eg: iPad portrait) 20px 40px
1024px (eg: iPad landscape) 24px 48px
1280px 28px 56px
1536px 32px 64px
1920px 38px 76px
2560px 48px 96px

Padding (Inside Grid Columns)

Standard-sized padding

1
2
3
4

Add padding to your columns with the pad rule. Add the rule to the data-attribute that corresponds to your desired breakpoint:

<div data-sm="2column">
    <div data-sm="pad">1</div>
    <div data-sm="pad">2</div>
    <div data-sm="pad">3</div>
    <div data-sm="pad">4</div>
</div>

Double-sized padding

1
2
3
4

For larger padding (twice the size) use the pad2 rule:

<div data-sm="2column">
    <div data-sm="pad2">1</div>
    <div data-sm="pad2">2</div>
    <div data-sm="pad2">3</div>
    <div data-sm="pad2">4</div>
</div>

Child padding

1
2
3
4

Rather than specifying padding for every column in a set, add the childpad rule to the grid container to give padding to all children.

<div data-sm="2column childpad">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

Double child padding

1
2
3
4

Add the childpad2 rule to the grid container to give double padding to all children.

<div data-sm="2column childpad2">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

Remove padding

1
2
3
4

By default, columns don't have padding. If padding has been set on the container with childpad, you can remove it from select columns with the nopad rule.

<div data-sm="childpad">
    <div>1</div>
    <div>2</div>
    <div data-sm="nopad">3</div>
    <div>4</div>
</div>

Responsive padding

The Responsive Attributes system uses my special formula to make padding respond to your screen size.

/* standard-sized padding */
padding:calc(8px + 1.5625vw);

/* double-sized padding */
padding:calc((8px + 1.5625vw) * 2);

See my article: Responsive Padding, Margin & Gutters With CSS Calc to learn why this technique is so useful.

Responsive padding sizes per screen width

Screen width pad pad2
320px (eg: iPhone 4 & 5) 13px 26px
360px (eg: Galaxy S5) 14px 28px
375px (eg: iPhone 6, 7, & 8) 15px 30px
480px 16px 32px
768px (eg: iPad portrait) 20px 40px
1024px (eg: iPad landscape) 24px 48px
1280px 28px 56px
1536px 32px 64px
1920px 38px 76px
2560px 48px 96px

Grid Column Alignment

Horizontal grid column alignment

Stretch (default)

1
2
3

Grid items automatically stretch to the full column width by default.

<div data-sm="3column pad gap">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

Left

1
2
3

Use the left rule to align grid items to the left side of the column.

<div data-sm="3column pad gap">
    <div data-sm="left">1</div>
    <div data-sm="left">2</div>
    <div data-sm="left">3</div>
</div>

Center

1
2
3

Use the center rule to align grid items to the center of the column.

<div data-sm="3column pad gap">
    <div data-sm="center">1</div>
    <div data-sm="center">2</div>
    <div data-sm="center">3</div>
</div>

Right

1
2
3

Use the right rule to align grid items to the right side of the column.

<div data-sm="3column pad gap">
    <div data-sm="right">1</div>
    <div data-sm="right">2</div>
    <div data-sm="right">3</div>
</div>

Vertical grid column alignment

Stretch (default)

A
A
B
C
A
B

Grid items automatically stretch to the full column height by default.

<div data-sm="3column pad gap">
    <div>A</div>
    <div>A<br>B<br>C</div>
    <div>A<br>B</div>
</div>

Top

A
A
B
C
A
B

Use the top rule to vertically align grid items to the top of the column.

<div data-sm="3column pad gap">
    <div data-sm="top">A</div>
    <div data-sm="top">A<br>B<br>C</div>
    <div data-sm="top">A<br>B</div>
</div>

Middle

A
A
B
C
A
B

Use the middle rule to vertically align grid items to the middle of the column.

<div data-sm="3column pad gap">
    <div data-sm="middle">A</div>
    <div data-sm="middle">A<br>B<br>C</div>
    <div data-sm="middle">A<br>B</div>
</div>

Bottom

A
A
B
C
A
B

Use the bottom rule to vertically align grid items to the bottom of the column.

<div data-sm="3column pad gap">
    <div data-sm="bottom">A</div>
    <div data-sm="bottom">A<br>B<br>C</div>
    <div data-sm="bottom">A<br>B</div>
</div>

Text Alignment

Column text alignment

Left
Center
Right

Align text in a specific column with the textl (default), textc, and textr rules.

<div data-sm="1column">
    <div data-sm="textl">Left</div>
    <div data-sm="textc">Center</div>
    <div data-sm="textr">Right</div>
</div>

Grid container text alignment

Center
Center
Center

Add align rules to the grid container to affect all child columns.

<div data-sm="1column textc">
    <div>Center</div>
    <div>Center</div>
    <div>Center</div>
</div>

Rule Cascading

Rules set on smaller breakpoints automatically carry over to larger breakpoints unless overwritten by another rule.

For example; If you set your grid container to 2 columns on mobile, it will stay 2 columns on tablet and desktop unless a different rule is set for those breakpoints.

Rule cascading means you don't have to set the same rules for multiple breakpoints if they're the same.

In the following example, there are two columns for mobile, tablet, and desktop, even though the 2column rule is only specified for mobile.

<div data-sm="2column">
    <div>Col1</div>
    <div>Col2</div>
</div>

Semantic HTML Compatible

Semantic HTML5 tags

Responsive data attributes can be added to any HTML element so you are free to use semantic HTML5 tags.

HTML5 example

<article data-sm="1column childpad" data-md="2column">
    <header data-md="colspan2">
        Header
    </header>
    <section>
        Main content
    </section>
    <aside>
        Right sidebar
    </aside>
    <footer data-md="colspan2">
        Footer
    </footer>
</article>

Proper use of HTML5 elements (instead of div-soup) improves your website semantics, accessibility, and can help with on-page Search Engine Optimization (SEO).

Semantic custom HTML elements

Responsive data attributes are also compatible with custom HTML elements.

Custom elements example

<top-products data-sm="1column childpad" data-md="2column">
    <product-details>
        <!-- product 1 info -->
    </product-details>
    <product-details>
        <!-- product 2 info -->
    </product-details>
    <product-details>
        <!-- product 3 info -->
    </product-details>
    <product-details>
        <!-- product 4 info -->
    </product-details>
</top-products>

I love custom elements! They're powerful, plus they make your code easier to read and write. See my articles for more details:

Add Responsive Attributes To Your Project For FREE!

Less than 1kb of CSS! (minified and gzipped) Free Download

Responsive Layout Examples

The following layouts showcase the power and simplicity of the Responsive Attributes system:

Holy Grail Responsive 3-Column Layout

The holy grail layout is considered one of the most difficult layouts to achieve so it's a perfect candidate to showcase how simple Responsive Attributes are to use.

Holy grail 3 column layout responsive diagram

Live demo

Header
Main content
Left sidebar
Right sidebar
Footer

Semantic HTML

<main data-sm="1column" data-md="2column" data-lg="4column">
    <header data-sm="pad" data-md="colspan2" data-lg="colspan4 order1">
        Header
    </header>
    <article data-sm="pad row" data-md="colspan2">
        Main content
    </article>
    <section data-sm="pad" data-lg="order2">
        Left sidebar
    </section>
    <aside data-sm="pad">
        Right sidebar
    </aside>
    <footer data-sm="pad" data-md="colspan2" data-lg="colspan4">
        Footer
    </footer>
</main>

CSS

No extra CSS required, all the structural styles are handled by the Responsive Attributes system.

Beautiful image

Image With Text On Right

On mobile, the image sits above the text, on tablet and larger, the text is positioned to the right of the image.

<section
    data-sm="1column pad gap"
    data-md="3column middle pad2"
    >
    <figure>
        <img ... >
    </figure>
    <div data-md="colspan2">
        <h2>Image With Text On Right</h2>
        <!-- text here -->
    </div>
</section>
Beautiful image

Image With Text On Left

On mobile, the image sits above the text, on tablet and larger, the text is positioned to the left of the image.

<section
    data-sm="1column pad gap"
    data-md="3column middle pad2"
    >
    <figure>
        <img ... >
    </figure>
    <div data-md="colspan2 order1">
        <h2>Image With Text On Left</h2>
        <!-- text here -->
    </div>
</section>

Testimonials

Joe Blogs

Joe Blogs

"Responsive Attributes are so fun and easy to use - WIN!"

Jane Smith

Jane Smith

"I love how Responsive Attributes handles all of the responsive CSS for me."

Ben Developer

Ben Developer

"Once I added Responsive Attributes to my project laying out webpages was a breeze!"

Anna Designer

Anna Designer

"Such a simple system using only 3 data-attributes but oh so powerful."

The HTML

<section
    data-sm="1column pad gap textc"
    data-md="2column"
    data-lg="4column"
    >
    <h2 data-md="colspan2" data-lg="colspan4 textc">Testimonials</h2>
    <figure data-sm="pad">
        <img ... class="round">
        <figcaption>
            <h3><!-- name here --></h3>
            <p><!-- testimonial here --></p>
        </figcaption>
    </figure>
    <figure data-sm="pad">
        <img ... class="round">
        <figcaption>
            <h3><!-- name here --></h3>
            <p><!-- testimonial here --></p>
        </figcaption>
    </figure>
    <figure data-sm="pad">
        <img ... class="round">
        <figcaption>
            <h3><!-- name here --></h3>
            <p><!-- testimonial here --></p>
        </figcaption>
    </figure>
    <figure data-sm="pad">
        <img ... class="round">
        <figcaption>
            <h3><!-- name here --></h3>
            <p><!-- testimonial here --></p>
        </figcaption>
    </figure>
</section>

The CSS

We only need a single line of CSS to make the images round:

.round {
    border-radius:50%;
}

Browser Support

Responsive Attributes uses CSS grid

Responsive Attributes (which uses CSS grid under the hood) has over 96% browser support, so it's acceptable to use in most production environments (source).

Responsive Attributes Generator

Generate Responsive Attributes code for your favorite framework

A big thank you to Leb Cit who created the amazing Responsive Attributes Generator that allows you to easily incorporate this simple layout system into your favorite coding framework.

Responsive Attributes Generator

Read more of my web design articles:

Responsive Columns Layout System

Responsive Columns: Build Amazing Layouts With Custom HTML Tags

Responsive text size

Responsive Font Size (Optimal Text at Every Breakpoint)

A web developer in the engine room

Best Web Development Tools (Free & Paid)

Columns all the same height

Equal-Height Columns (CSS Grid, Flexbox, Floated Containers, & Table Methods)

Boggle dice shaker

Boggle Dice Shaker (Built With Javascript)

Padding bewteen desktop, tablet, and mobile

Responsive Padding, Margin & Gutters With CSS Calc

Footer at the bottom of the page diagram

Bottom Footer (CSS Grid, Flexbox, & Absolute Position Methods)

Holy grail 3 column layout responsive diagram

Holy Grail 3-Column Responsive Layout (CSS Grid & Flexbox Versions)

Open book two column layout

2 Column Layouts (Responsive, Flexbox & CSS Grid)

3 column product comparison layout

3 Column Layouts (Responsive, Flexbox & CSS Grid)

Is CSS margin top or bottom better?

CSS: Margin Top vs Bottom (A Trick You Should Know)

How to add CSS to HTML

How to add CSS to HTML (With Link, Embed, Import, and Inline styles)

Custom elements plus CSS with no javascript

Custom Element Examples (Without Javascript)

A delicious soup made from custom elements

Replace Divs With Custom Elements For Superior Markup

Racing car made from custom tags

Custom HTML Tags (18 Things To Know Before Using Them)

ID vs Class CSS selectors

ID vs Class: Which CSS Selector Should You Use? (6 Examples)

Looking into an empty div

Empty HTML Tags (21 Weird Things You Need To Know!)

Beautiful centered menus with CSS

CSS: Horizontally Centred Menus (With Optional Dropdowns)

Ads that can change size to fit any screen size

Responsive Banner Ads with HTML5 and CSS3

Superman blocking styles

Style Blocker: How To Prevent CSS Cascade With Shadow DOM

Responsive house plan

Responsive House Plan (Web Design Meets Architecture!)

Web design Web design Architecture Architecture Life drawing Life drawing Art gallery Art gallery Synesthesia Synesthesia Comics Comics

About Contact Privacy

© 1994 — 2024 Matthew James Taylor