Note: Sink pages like this one are unpolished test files.

Return to Guideline

Grids Sink

Basic

6 columns
6 columns

12/6/4 columns
12/6/8 columns

Advanced Sizing

4 columns
Whatever is left!

4 columns
Whatever is left!
Whatever is left!

Shrink!
Expand

Responsive Adjustments

One
Two
Three
Four
Five
Six

Automatic Stacking - comet-row__inner-flex--medium-unstack

One
Two
Three
Four
Five
Six

Column Alignment - Horizontal Alignment

Aligned to
the left

Aligned to
the right

Aligned to
the middle

Aligned to
the edges

Aligned to
the space around

Vertical Alignment

I am in the middle!
I am as well, but I have so much text I take up more space! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facere ducimus earum minus, inventore, ratione doloremque deserunt neque perspiciatis accusamus explicabo soluta, quod provident distinctio aliquam omnis? Labore, ullam possimus.

These columns align to the top.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.

Align bottom
Align middle
Align top
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?

Collapse/Uncollapse Rows

Removes gutter at large media query
Removes gutter at large media query

Offsets

Offset 2 on large
4 columns

Source Ordering

This column will come second on small, and first on medium and larger.
This column will come first on small, and second on medium and larger.

Nesting

Outer column
Nested column
Nested column
Nested column
Outer column
Nested column
Nested column
Nested column