Examples

Centered layout wrappers

Note: container is simply used for adding a container query context — it doesn’t add any constraints.

wrapper / wrapper-xl — max 1600px
wrapper-lg — max 1280px
wrapper-md — max 960px
wrapper-sm — max 640px
wrapper-xs — max 320px

Labels (see decoration)

Buttons

Link pseudo-button Link ghost pseudo-button

Full width button inside wrapper-sm

Up to four column grid layouts

A malleable grid without setting equalization on cell widths. In this example, for sm up, columns will adopt whatever width they require for their content. Specify where you want your grid items using column placement classes — then CSS grid will figure out how many columns you need.

grid gap-1

sm:col-1 A narrow column
sm:col-2 This will expand to become a wide column because it has a lot of content. This will expand to become a wide column because it has a lot of content. This will expand to become a wide column because it has a lot of content.
sm:col-3 Another narrow column

Using equal- modifiers on the grid wrapper will both equalize column width and specify the number of columns. Then for simple layouts (e.g. galleries), you won’t need column placement classes.

grid sm:equal-2-cols gap-2
#
#
grid sm:equal-2-cols md:equal-3-cols gap-2
#
#
#
#
sm:col-span-2

sm:grid takes effect at 640px up. Below 640px, gap-2 will have no effect.

sm:grid sm:equal-4-cols gap-2
#
sm:col-span-2
sm:col-span-3
sm:col-4 sm:row-1 sm:row-span-2

Text sizes

See typography. t-lg simply enlarges by 1.325em. t-long-read and t-display involve a clamp().

Default t-long-read wrapper t-display wrapper

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

Example “research article” page layout using grid

grid md:equal-3-cols lg:equal-4-cols gap-3
md:col-2 md:col-span-2

Title of This Article

md:col-2 md:col-span-2 lg:col-4 lg:row-span-2 relative
sticky top

On this page TOC

  • Abstract
  • Materials and Methods
  • Discussion
  • Conclusion
md:col-2 md:col-span-2

Abstract

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

Materials and Methods

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

Discussion

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

Conclusion

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

md:col-1 md:row-1 md:rows-1-3 lg:rows-1-2

Navigation menu

  • Page One
  • Page Two
  • Page Three

Content-grid layouts

Title of this content-grid demo

content-grid is intended for long-form articles. Its 7-column grid places the content in column 4, where each immediate-child elment will be its own grid item. popout spans rows 3-5. expand spans rows 2-6. full-bleed spans rows 1-7.

Here’s a styled <p class="popout">:

☆ Information panel

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

Here’s a styled <div class="expand">:

This example text may or may not distort the 16×9 aspect ratio that has been given to this demo component.

The SVG image rectangle will be 1280px by 720px if your viewport is big enough. See what it does on a narrow viewport width (e.g. phone).

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

Here’s a styled <p class="full-bleed">:

full-bleed — expands to the full width of the avilable space. If there are no sidebars, it will reach the sides of the viewport.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

Example components

Styled by utility classes.

Without *-dark-invert

☆ Information panel
⚠ Warning alert panel.

With *-dark-invert

☆ Information panel
⚠ Warning alert panel.
Card category

Card title

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum.

Get this thing

Flexbox media object

In this example, the media object “collapses” to a single column below container width 640px, using sm:flex. And below that width, the title and button are centered using t-center, which is overridden by sm:t-left.

Form inputs etc. as grid items

Grid media object

This example will behave as a grid for all container widths, even down to phones in portrait orientation.

A “two-up” feature block

In this exmple, the image is before the text content in the HTML. But for container width above 768px, the grid system places the image to the right (in the 2nd column). The text content is positioned vertical-center by flex flex-column flex-center

Discover more