<certara-grid>, <certara-grid-row>, and <certara-grid-column> are deprecated. Use native HTML with .container / .container-*, .row, and .col-* classes from the global stylesheet instead. See Layout — Flex grid (patterns) and containers.

Certara Grid

This is the classic 12-column flex grid based on Bootstrap 5 featuring offsets, 5 responsive breakpoints (sm, md, lg, xl, xxl), and gutters. It's comprised of 3 elements as follows: 

      <certara-grid>
        <certara-grid-row>
          <certara-grid-column>

Default column distribution

one two three one two three four five six

Auto cols

<certara-grid-row cols="auto">

one two three four five six

<certara-grid-column col-size="auto">

These columns will resize to handle the amount of content ... within

Defined column sizes

one one one one one one one one one one one one two two two two two two three three three three four four four five seven six six seven five eight four nine three ten two eleven one twelve

Offset

offset zero offset one offset two offset three offset four offset five offset six offset seven offset eight offset nine offset ten offset eleven

Gutters

Gutter 0 Gutter 1 Gutter 2 Gutter 3 Gutter 4 Gutter 5 Gutter 6 Gutter 7 Gutter 8 Gutter 9 Gutter 10

Responsive breakpoints

sm-* breakpoint

1 1 1 1 1 1 1 1 1 1 1 1

md-* breakpoint

1 1 1 1 1 1 1 1 1 1 1 1

lg-* breakpoint

1 1 1 1 1 1 1 1 1 1 1 1

xl-* breakpoint

1 1 1 1 1 1 1 1 1 1 1 1

xxl-* breakpoint

1 1 1 1 1 1 1 1 1 1 1 1

Container sizes

sm size

1

md size

1

lg size

1

xl size

1

default size

1

xxl size

1