HomeCore

Grid

1-column layout is applied by default for the following breakpoints: xsmall, small and medium.

2 or 3-column layout can be used for higher resolution breakpoints: large, xlarge and xxlarge.

On the 1-column layout, the grid columns are stacked vertically and full width.

Syntax

The BEM class syntax is the following (breakpoint and property are optional):

.ui-row[--property]
.ui-col[--breakpoint][--property]

1 column

Full width
<!-- By default, one column will stretch and fill the full width -->
<div class="ui-row">
  <div class="ui-col"> ... </div>
</div>

2 columns

1/3 on one side and 2/3 on other side (and vice-versa)

1/3
2/3
<!-- 1/3 on left side and 2/3 on right side -->
<!-- these sizes only start to take effect at breakpoint "large" and above -->
<div class="ui-row">
  <div class="ui-col ui-col--1-3"> ... </div>
  <div class="ui-col ui-col--2-3"> ... </div>
</div>

<!-- vice versa -->
<div class="ui-row">
  <div class="ui-col ui-col--2-3"> ... </div>
  <div class="ui-col ui-col--1-3"> ... </div>
</div>

3 columns (or more)

Equal size columns (unless content forces columns to expand)

equal size
equal size
equal size
LoremipsumdolorsitametconsecteturadipisicingelitConsequaturiu
equal size
equal size
<!-- Grid columns (without modifier classes) will be of equal size -->
<!-- If the content is too big, the grid columns will re-adjust to allow the content to fit as best as possible -->
<!-- To force colum width, use modifier classes like "--1-2" or "--1-3" -->
<div class="ui-row">
  <div class="ui-col"> ... </div>
  <div class="ui-col"> ... </div>
  <div class="ui-col"> ... </div>
</div>

Up to 8 columns

1/8 on one side and 7/8 on other side and some other examples

1/8
7/8
1/5
2/5
2/5
2/6
1/6
3/6
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/8
<!-- 1/8 on left side and 7/8 on right side -->
<div class="ui-row">
  <div class="ui-col ui-col--1-8"> ... </div>
  <div class="ui-col ui-col--7-8"> ... </div>
</div>

<!-- 2/6 on left side, 1/6 in the middle and 3/6 on right side -->
<div class="ui-row">
  <div class="ui-col ui-col--2-6"> ... </div>
  <div class="ui-col ui-col--1-6"> ... </div>
  <div class="ui-col ui-col--3-6"> ... </div>
</div>

Shrink

Force a column to take as little space as possible, and let other columns fill the remaining space.

Shrink me
1/3
Will resize to fill available space
<!-- column 1 will shrink to fit its content -->
<!-- column 2 will take 1/3 of the space -->
<!-- column 3 will fill the remaining space available -->
<div class="ui-row">
  <div class="ui-col ui-col--shrink"> ... </div>
  <div class="ui-col ui-col--1-3"> ... </div>
  <div class="ui-col"> ... </div>
</div>

Re-order

Using flexbox order property, we can re-order columns to new position, different from their original position in the DOM. The most common scenario will be to push/pull columns to go first or last. If even more control is required, columns can be re-organised using a number from 1 to 12.

Remember that columns without re-order value will keep their default value of 0. If a column is set to be order 1, it will still appear AFTER columns with no specific re-ordering.

Col #1
first column in the DOM, but re-ordered to be last in the row. The other columns will remain in their normal order.
order: last
Col #2
default order: 0
Col #3
default order: 0
<!-- Re-order first/last -->
<div class="ui-row">
  <div class="ui-col ui-col--order-last"> Will be displayed last in the row </div>
  <div class="ui-col"> ... </div>
  <div class="ui-col"> ... </div>
</div>
Col #1
forced to last position
order: last
Col #2
default order: 0
Col #3
forced to 3rd position
order: 3
Col #4
forced to 2nd position
order: 2
Col #5
forced to position 1
order: 1
<!-- Re-order to specific # position -->
<div class="ui-row">
  <!-- in that scenario, the 2 columns without re-ordering will move to the start of the row -->
  <!-- ui-col--order-1 does NOT supersede normal columns, only other re-order columns, ex: order-2 or 3  -->
  <div class="ui-col ui-col--order-last"> last in the row </div>
  <div class="ui-col"> will remain in position 0 (default) </div>
  <div class="ui-col ui-col--order-3"> position 3 </div>
  <div class="ui-col ui-col--order-2"> position 2 </div>
  <div class="ui-col ui-col--order-1"> position 1 </div>
</div>

No gutters

Remove the padding for all columns

<!-- No gutters -->
<div class="ui-row ui-row--no-gutters">...</div>

Vertical Alignment

By default, all columns of a row will be aligned top. This can be set to center or bottom using pre-defined classes. It's possible to force a particular column to be aligned differently from the other columns in the row.

All columns are aligned top (by default)
All columns are aligned center
All columns are aligned bottom
All columns aligned top by default
...
...
Also aligned top
This column is forced aligned bottom
<!-- Aligned top -->
<!-- By default, all columns are aligned at the top (no modifier class required) -->
<div class="ui-row">...</div>
<div class="ui-row ui-row--top">...</div>

<!-- Aligned center -->
<div class="ui-row ui-row--center">...</div>

<!-- Aligned bottom -->
<div class="ui-row ui-row--bottom">...</div>

<!-- Mixed alignment -->
<!-- By default, the grid is aligned at the top, but we can force specific column(s) to align differently -->
<div class="ui-row">
  <div class="ui-col"> ... </div>
  <div class="ui-col"> ... </div>
  <div class="ui-col ui-col--bottom"> ... </div>
</div>

Text alignment

Text aligned left (default)
Text aligned center
Text aligned right
<!-- text alignment within grid column -->
<div class="ui-row">
  <div class="ui-col ui-col--align-left"> ... </div>
  <div class="ui-col ui-col--align-center"> ... </div>
  <div class="ui-col ui-col--align-right"> ... </div>
</div>

Wrap columns

If the columns width defined exceeds the normal row width, columns will wrap on new lines automatically.

Full width
1/3
2/3
1/2
<!-- Columns in the same row will wrap if they have modifier classes that force a specific width -->
<!-- For example, 1 full width column followed by columns 1/3 and 2/3... -->
<div class="ui-row">
  <div class="ui-col ui-col--full"> ... </div>
  <div class="ui-col ui-col--1-3"> ... </div>
  <div class="ui-col ui-col--2-3"> ... </div>
  <div class="ui-col ui-col--1-2"> ... </div>
</div>

Nested grid

More complex layout can be achieve using nested grids.

Full width
auto
auto
1/3
<!-- Top-level row -->
<div class="ui-row">

  <!-- This grid column is a "parent" to another nested grid -->
  <div class="ui-col ui-col--parent">

    <!-- 2nd level nested grid starts here -->
    <div class="ui-row">
      <div class="ui-col ui-col--full"> ... </div>
      <div class="ui-col"> ... </div>
      <div class="ui-col"> ... </div>
    </div>
  </div>

  <div class="ui-col ui-col--1-3"> ... </div>
</div>

Breakpoints

By default, the grid column width is set for all breakpoints. Column size can also be set for specific breakpoints, using mobile-first approach.

1/2 on xsmall
full width on small
1/3 on medium
1/2 on xsmall
full width on small
2/3 on medium
Full width on xsmall (by default)
1/2 on large (by default)
2/3 on xlarge
Full width on xsmall (by default)
1/2 on large (by default)
1/3 on xlarge
<!-- Columns in the same row will wrap if they have modifier classes that force a specific width -->
<!-- For example, 1 full width column followed by columns 1/3 and 2/3... -->
<div class="ui-row">
  <div class="ui-col ui-col--xsmall--1-2 ui-col--small--full ui-col--medium--1-3"> ... </div>
  <div class="ui-col ui-col--xsmall--1-2 ui-col--small--full ui-col--medium--2-3"> ... </div>
  <div class="ui-col ui-col--1-2 ui-col--xlarge--2-3"> ... </div>
  <div class="ui-col ui-col--1-2 ui-col--xlarge--1-3"> ... </div>
</div>
Shrink on xsmall
1/2 on medium
Expand on xsmall
1/2 on medium
<!-- if "shrink" is used on smaller breakpoints, "expand" should be used on other columns in the same row -->
<!-- without "expand" those columns would default to 100% width (until breakpoint large is reached) -->
<div class="ui-row">
  <div class="ui-col ui-col--xsmall--shrink ui-col--medium--1-2"> ... </div>
  <div class="ui-col ui-col--xsmall--expand ui-col--medium--1-2"> ... </div>
</div>
Refinitiv © 2020