4.32.2

Grid/Breakpoints

Responsive 12 column system

Demo

API

Tags

Name Description
<s-row> Custom HTML tag, accepts <s-col> as content
<s-col> Custom HTML tag, accepts content

Attributes

Rows only

Name Value Required Description
collapse
  • Boolean attribute
  • sm
  • md
  • lg
  • xl

Collapses all gutters for the row at specified breakpoint(s). Defining the attribute with no value will collapse at all breakpoints. example

Columns only

Name Value Required Description
span
  • 1-12
  • sm-{1-12}
  • md-{1-12}
  • lg-{1-12}
  • xl-{1-12}
  • auto
  • {sm-xl}-auto

Sets the number of columns to span. Screen size prefixes apply for each breakpoint.

Setting to auto equally divides the column using the available space for the row. For best results, the number of auto columns in a row should be a factor 12 (1, 2, 3, 4, 6). Example

When mixing auto columns with fixed columns, the number of auto columns should be a factor of the number of columns left in the available space. For instance, if 9 columns of space are left in a row, only 1 or 3 columns will work. Anything else will result in misaligned gutters.

The auto span attribute can be mixed with auto breakpoints, but the breakpoint definitions must preceed the auto attribute. example
offset
  • 1-12
  • sm-{1-12}
  • md-{1-12}
  • lg-{1-12}
  • xl-{1-12}

Sets the offset of the column example
center
  • Boolean attribute
  • sm
  • md
  • lg
  • xl
  

Centers column, see example. Can also be set to one or more of the specified breakpoint(s). See example

Rows and columns

Name Value Required Description
hide
  • sm
  • md
  • lg
  • xl
  

Hides the row/column only at specified breakpoint(s). See example
show
  • sm
  • md
  • lg
  • xl
  

Shows the row/column only at specified breakpoint(s). A row/column with a show attribute will be hidden for any breakpoints not defined in the attribute.

Demo

API

Tags

Name
<Row>
<Col>

Props

Rows only

Name Value Required Description
collapse
  • Boolean
  • sm
  • md
  • lg
  • xl

Collapses all gutters for the row at specified breakpoint(s). Defining the attribute with no value will collapse at all breakpoints. example

Columns only

Name Value Required Description
span
  • 1-12
  • sm-{1-12}
  • md-{1-12}
  • lg-{1-12}
  • xl-{1-12}
  • auto
  • {sm-xl}-auto

Sets the number of columns to span. Screen size prefixes apply for each breakpoint.

Setting to auto equally divides the column using the available space for the row. For best results, the number of auto columns in a row should be a factor 12 (1, 2, 3, 4, 6). Example

When mixing auto columns with fixed columns, the number of auto columns should be a factor of the number of columns left in the available space. For instance, if 9 columns of space are left in a row, only 1 or 3 columns will work. Anything else will result in misaligned gutters.

The auto span attribute can be mixed with auto breakpoints, but the breakpoint definitions must preceed the auto attribute. example
offset
  • 1-12
  • sm-{1-12}
  • md-{1-12}
  • lg-{1-12}
  • xl-{1-12}

Sets the offset of the column example
center
  • Boolean attribute
  • sm
  • md
  • lg
  • xl
  

Centers column, see example. Can also be set to one or more of the specified breakpoint(s). See example

Rows and columns

Name Value Required Description
hide
  • sm
  • md
  • lg
  • xl
  

Hides the row/column only at specified breakpoint(s). See example
show
  • sm
  • md
  • lg
  • xl
  

Shows the row/column only at specified breakpoint(s). A row/column with a show attribute will be hidden for any breakpoints not defined in the attribute.

Skylab React links

General information about using our React package

Guidelines

Breakpoint sizes

Name Minimum width (pixels) Maximum width (pixels)
xs 320 383
sm 384 599
md 600 839
lg 840 1259
xl 1260 1600

Put content in columns

Your content goes inside the columns. Generally you should avoid putting extra classes and attributes on the rows or columns and instead apply that to the markup inside.

Define responsive column spans in order

Responsive columns should define their breakpoint and span counts in order of breakpoint size.

For example: <s-col span="sm-2 lg-4 4"></s-col>

Set a default span at the end of your span attribute

If a responsive column span is defined, a non-responsive span value should also be set to act as a default. Otherwise the column will span 100% of the row when not inside defined breakpoints. Defaults should always be defined last in the span attribute string.

For example: <s-col span="sm-2 3"></s-col>

Mobile expansion

When the viewport size is at the small breakpoint or lower, the columns will automatically expand to fill the full width of the row and display in a stack by wrapping inside the row vertically.

Mind your auto columns

When using auto columns in a row, limit the number of columns to 1, 2, 3, 4, or 6 (factors of 12) to align with the gutters. Rows with 5, 7, or more columns will have misaligned gutters and may look odd.

Examples

Span attribute

Using span definitions, we can have the column span a specific number of columns. The span value should be between 1 and 12, representing the number of columns to span.

<s-col span="4">

Responsive span attribute

Using responsive span definitions, we can have the column span different sizes at different breakpoints. Span definitions should be separated by a single space, for example: span="sm-2 lg-4 4"

If no default non-responsive value is set, the column will span 100% of the row at any breakpoint not defined in the span attribute.

<s-col span="sm-6 md-4 lg-3 4">

Offset attribute

Using offsets, we can have empty space between the spans

<s-col offset="2">

Responsive offsets

We can also define responsive offsets

<s-col offset="sm-2 lg-4 4">

Center attribute

We provide a center attribute to center a column in the available space it has

<s-col center>

Responsive center attribute

We also support responsive center={sm,md,lg,xl} values for centering only at specific breakpoints

<s-col center="sm xl">

Auto span

Auto span columns will equally divide the available row space, while still maintaining a fixed gutter. Auto columns should be limited to 1, 2, 3, 4, or 6 per row. If there are 5, 7, or more the grid gutters won't align.

Auto columns can be mixed with set column spans, but the number of auto columns must be a factor of the number of columns left (otherwise the gutters will not align). For instance, if a row has a single column with a span of 3, that would leave 9 columns so there can only be 1 or 3 auto columns to fill the space.

<s-col span="auto">

Repsonsive auto span

Auto columns can also have responsive breakpoints

<s-col span="sm-auto auto">

Nested auto columns

Auto columns can also be nested

<s-col span="auto"><s-row><s-col span="auto">...

Small expand

All columns will expand to 100% of column width at 'sm' breakpoint unless a 'sm' span attribute has been defined

<s-col span="1">

Columns have span="sm-1 1" attribute and will not expand to 100% at 'sm' breakpoint

<s-col span="sm-1 1">

Responsive hide

Row is hidden at 'sm' breakpoint

<s-row hide="sm">

Collapse gutters

Collapse gutters for all columns inside the row

<s-row collapse>

auto
auto
auto

Collapse gutters at 'xl' breakpoint, and hide at 'sm' breakpoint

<s-row collapse="xl" hide="sm">

auto
auto
auto
auto
auto
auto
auto
auto

Collapse gutters at 'lg' breakpoint

<s-row collapse="lg">

auto
auto

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com