Styling: Responsive Grid

Oracle® JavaScript Extension Toolkit (JET)
8.0.0
F18189-01


Version:
  • 8.0.0
See Responsive Prefixes for information on what [size] means
Class(es) Description Example Usage
oj-[size]-[1-12] Set the number of columns out of 12. You start by coding for small screens, then you customize for larger screens as necessary. Let's look at some examples:
  • "oj-sm-6" works on all screen sizes.
  • "oj-lg-3" works on large and extra-large screens. It has no effect on small and medium screens.
  • "oj-sm-6" and "oj-lg-3" on the same column will be 6 columns wide on small and medium screens and 3 columns wide on large and extra-large screens.
Note that grids use percentage widths, and margins cannot be counted in those widths (this is a limitation of css), so you cannot combine grid classes with margins. 
  <div class="oj-flex">
    <div class="oj-flex-item oj-sm-6 oj-md-9">col 1</div>
    <div class="oj-flex-item oj-sm-6 oj-md-3">col 2</div>
  </div>
oj-[size]-odd-cols-[1-11]

Use this in a 2-column layout. Instead of putting sizing classes on every child, you can put a single class on the flex parent. The number of columns specifies how many of the 12 columns the odd-numbered columns can use. In a 2-column layout, the even-numbered columns will take up the remainder of the columns.

For example, setting oj-md-odd-cols-4 on the flex parent will have the effect of setting the odd column (col1) width to 4 and the even column (col2) width to 8 for all rows in the grid on a medium and up screen. 

  <div class="oj-md-odd-cols-4">
    <div class="oj-flex">
      <div class="oj-flex-item">col 1</div>
      <div class="oj-flex-item">col 2</div>
    </div>
  </div>
oj-[size]-even-cols-[1-5]

Use in a 4-column layout. In this layout, you must use both the odd-cols class to control the width of odd-numbered columns and the even-cols class to control the width of the even columns.

For example, setting oj-md-odd-cols-2 and oj-md-even-cols-4 on the flex parent has the effect of setting the first and third column widths to 2, and the second and fourth column widths to 4 on a medium and up screen.

 
  <div class="oj-md-odd-cols-2 oj-md-even-cols-4">
    <div class="oj-flex">
      <div class="oj-flex-item">col 1</div>
      <div class="oj-flex-item">col 2</div>
      <div class="oj-flex-item">col 3</div>
      <div class="oj-flex-item">col 4</div>
    </div>
  </div>