Simple – Columns
Key point: Use columns to better organize the content.

Simple site comes with a 12 point grid system built-in. The grid is used to create specific layouts within an application’s content. It contains 5 types of media breakpoints that are used for targeting specific screen sizes or orientations, xs, sm, md, lg and xl. These resolutions are defined in the viewport breakpoints table.

Each fragment is considered a column and the number of columns per row depends on the label applied to the fragment. If no label is applied, the fragment behaves as a 12 column size.

If you aren’t familiar with the concept of a grid system, please look at the following suggested guides:

Basic usage

Add a custom fragment-label as follows:

[prefix]-[type]-[size] *see Legend

  • Fragment label: s-col (fill the available space)
  • Fragment label: s-col-auto (based on the content size)
  • Fragment label: s-col-6 (1 of 2 columns – each col is 1/2 of the full width)
  • Fragment label: s-col-4 (1 of 3 columns – each col is 1/3 of the full width)
  • Fragment label: s-col-3 (1 of 4 columns – each col is 1/4 of the full width)
  • ...
  • Fragment label: s-col-1 (1 of 12 columns)
  • Fragment label: s-col-2 (1 of 6 columns – each col is 1/6 of the full width)
  • ...

Responsive

There are labels that support responsive displays using the desirable code of the breakpoint.

Just add a custom fragment-label as follows:

[prefix]-[type]-[breakpoint]-[size] *see Legend

Breakpoint-based options on a grid work in an andUp fashion. With this in mind, the xs breakpoint is assumed and has been removed from this context.

  • Options like s-col-sm and s-col-md exist, but s-col-xs doesn’t.
  • The equivalent to s-col-xs is the s-col option.

Example

Let’s say you need:

  • One column (per row) layout for small viewports.
  • A two columns (per row) layout for medium viewports.
  • A four columns (per row) layout for big viewports.

Small viewports (xs and sm)

Medium viewports (md)

Big viewports (lg and xl)

Add three labels for each fragment (column):

  • Fragment label: s-col (for small viewports)
  • Fragment label: s-col-md-6  (for medium viewports)
  • Fragment label: s-col-lg-3  (for big viewports)

*Legend:
prefix = Simple site prefix s
type = type of label col
breakpoint = breakpoint code sm, md, lg and xl
size =  column size (from 1 to 12)

In some cases, you might need to use a line/column break to move the next column(s) to another line by adding an empty fragment or starting a new row.

See in action

View columns demo.