<certara-grid-layout> and <certara-grid-layout-column> are deprecated. Use native HTML with .grid, .g-col-*, and .g-start-* classes from the global stylesheet instead.

Certara Grid Layout

The <certara-grid-layout> component differs from the <certara-grid> component in that it does layout on both horizontal and vertical axes.

Defined column sizes

Using the col-size attribute in each <certara-grid-layout-column>

1 1 1 1 1 1 1 1 1 1 1 1 2 2 2 2 2 2 3 3 3 3 4 4 4 5 7 6 6 7 5 8 4 9 3 10 2 11 1 12

Column start

Using the col-start attribute in each <certara-grid-layout-column>

1 2 3 4 5 6 7 8 9 10 11

Responsive breakpoints

sm-* breakpoint

3 3 3 3

md-* breakpoint

3 3 3 3

lg-* breakpoint

3 3 3 3

xl-* breakpoint

3 3 3 3

xxl-* breakpoint

3 3 3 3