PAPER PAGES

Documentation »

Letter Page

8.5 x 11 in (216 x 279 mm)

Column Count Demo

This demo shows the pgrid layout, which is most useful for printed material. By default, there is one column when no other classes are applied to the pgrid wrapper.

Two Columns

This paragraph is split into two columns. Individual paragraphs or any other element can have specific column-count classes applied to them individually. If applied to the pgrid wrapper, all elements within it will be split into columns.

Three Columns

This is a three-column paragraph. Up to 12 columns are supported (cc1 - cc12). The column widths are automatically determined, when no column-width classes are applied. By default, there is 1em of gap spacing between columns.

Four Columns

This is the first paragraph, contained within a .pgrid.cc4 wrapper.

It makes sense that each of these paragraphs should take up one-fourth of the width of the page.

Even if there aren't 4 paragraphs within a .cc4 wrapper (there's 3 here), all content will still be divided up into 4 columns.

Five Columns

In the unordered list below, the 15 items should be split into 3 items per column.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10
  • Item 11
  • Item 12
  • Item 13
  • Item 14
  • Item 15

Half Letter Page

5.5 x 8.5 in (140 x 216 mm)

Column Gap Demo

To apply a gap between columns, apply the class col-gap, which uses a CSS variable. Alternatively, we can add gaps that are multiples of the element's default font size, ranging from 2 to 6 times. This demo uses two columns.

2x Gap Width

Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.

3x Gap Width

Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.

4x Gap Width

Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.

5x Gap Width

Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.

6x Gap Width

Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.

A4 Page

8.3 x 11.7 in (210 x 297 mm)

Column Width Demo

In multi-column layouts, we may need to make columns wider or narrower than the default. There are two ways to do this: either CM or EM based widths.

2cm / 5em Column Widths

Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.

Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.

Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.

Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.

4cm / 10em Column Widths

Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.

Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.

Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.

Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.

6cm / 15em Column Widths

HI. I'm a c-span paragraph. I go all the way across.

Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.

Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.

Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.

Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.

8cm / 20em Column Widths

Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.

Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.

Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.

Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.

12cm / 25em Column Widths

Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.

Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.

Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.

Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.