cHaOs GrId

The anti-grid grid.

Documentation »

DEMO 1: Default View

Normal view without any additional classes applied.

Winter DIV

I am a normal div element. Using B3Grid, my width is 25% on devices over 480px, and 100% on devices under 480px.

Spring Article

This is a springtime article element, and I have no set width.

Summer Surf Section

This is a sufin' summery section element.

Autumn Article

Autumn is my favorite season.
[end of article]

I am an impactful blockquote block.

PARAGRAPH.
I'm just a plain 'ol paragraph element. I am a pool of words.

I am
a link

Cellophane News

The news is that cellophane is a thin film of regenerated cellulose. It's usually transparent and is used primarily as a packaging material.

Section

I am a section element. I take up 25% of the width on large devices and up.

DEMO 2: Orderly-On-Mobile

Same as above, but all elements should appear as full-width blocks on devices 667px and below.

Winter DIV

I am a normal div element. Using B3Grid, my width is 25% on devices over 480px, and 100% on devices under 480px.

Spring Article

This is a springtime article element, and I have no set width.

Summer Surf Section

This is a sufin' summery section element.

Autumn Article

Autumn is my favorite season.
[end of article]

I am an impactful blockquote block.

PARAGRAPH.
I'm just a plain 'ol paragraph element. I am a pool of words.

I am
a link

Cellophane News

The news is that cellophane is a thin film of regenerated cellulose. It's usually transparent and is used primarily as a packaging material.

Section

I am a section element. I take up 25% of the width on large devices and up.

DEMO 3: Push-down Seconds, Pull-up Thirds, Push-left fourths, Pull-right Fifths

Building on Demo 2, we now do the following: push every second element from the bottom, pull every third element from the top, push every fourth element from the left, and pull every fifth element from the right.

Winter DIV

I am a normal div element. Using B3Grid, my width is 25% on devices over 480px, and 100% on devices under 480px.

Spring Article

This is a springtime article element, and I have no set width.

Summer Surf Section

This is a sufin' summery section element.

Autumn Article

Autumn is my favorite season.
[end of article]

I am an impactful blockquote block.

PARAGRAPH.
I'm just a plain 'ol paragraph element. I am a pool of words.

I am
a link

Cellophane News

The news is that cellophane is a thin film of regenerated cellulose. It's usually transparent and is used primarily as a packaging material.

Section

I am a section element. I take up 25% of the width on large devices and up.

DEMO 4: Relative Chaos

Building on Demo 3, we now make every odd-numbered element relative-positioned, while even-numbered elements are absolute-positioned.

Winter DIV

I am a normal div element. Using B3Grid, my width is 25% on devices over 480px, and 100% on devices under 480px.

Spring Article

This is a springtime article element, and I have no set width.

Summer Surf Section

This is a sufin' summery section element.

Autumn Article

Autumn is my favorite season.
[end of article]

I am an impactful blockquote block.

PARAGRAPH.
I'm just a plain 'ol paragraph element. I am a pool of words.

I am
a link

Cellophane News

The news is that cellophane is a thin film of regenerated cellulose. It's usually transparent and is used primarily as a packaging material.

Section

I am a section element. I take up 25% of the width on large devices and up.

DEMO 5: Absolute Chaos

Building on Demo 3, we now make every odd-numbered element absolute-positioned, while even-numbered elements are relative-positioned.

Winter DIV

I am a normal div element. Using B3Grid, my width is 25% on devices over 480px, and 100% on devices under 480px.

Spring Article

This is a springtime article element, and I have no set width.

Summer Surf Section

This is a sufin' summery section element.

Autumn Article

Autumn is my favorite season.
[end of article]

I am an impactful blockquote block.

PARAGRAPH.
I'm just a plain 'ol paragraph element. I am a pool of words.

I am
a link

Cellophane News

The news is that cellophane is a thin film of regenerated cellulose. It's usually transparent and is used primarily as a packaging material.

Section

I am a section element. I take up 25% of the width on large devices and up.

DEMO 6: Chaos of Absolute Thirds

Building on Demo 3, we make ONLY every third element absolute-positioned.

Winter DIV

I am a normal div element. Using B3Grid, my width is 25% on devices over 480px, and 100% on devices under 480px.

Spring Article

This is a springtime article element, and I have no set width.

Summer Surf Section

This is a sufin' summery section element.

Autumn Article

Autumn is my favorite season.
[end of article]

I am an impactful blockquote block.

PARAGRAPH.
I'm just a plain 'ol paragraph element. I am a pool of words.

I am
a link

Cellophane News

The news is that cellophane is a thin film of regenerated cellulose. It's usually transparent and is used primarily as a packaging material.

Section

I am a section element. I take up 25% of the width on large devices and up.

DEMO 7: Offsets of Individual Elements

Building on Demo 3, we apply offset classes to invidual elements.

Winter DIV

I am a normal div element. Using B3Grid, my width is 25% on devices over 480px, and 100% on devices under 480px.

Pushed from top 5-fold.

Spring Article

This is a springtime article element, and I have no set width.

Pulled from top three-fold, and pushed from right 4-fold.

Summer Surf Section

This is a sufin' summery section element.

Pulled right, pushed from bottom two-fold.

Autumn Article

Autumn is my favorite season.
[end of article]

I am an impactful blockquote block.

PARAGRAPH.
I'm just a plain 'ol paragraph element. I am a pool of words.
Pulled from the right 4-fold.

I am
a link

Cellophane News

The news is that cellophane is a thin film of regenerated cellulose. It's usually transparent and is used primarily as a packaging material.

Section

I am a section element. I take up 25% of the width on large devices and up.