Oracle JET Grids

Use the Oracle JET grid classes with flex layouts to create grids that vary the number and width of columns based on the width of the user's screen.

Topics:

The Responsive Grids section in the Oracle JET Cookbook provides several examples and recipes for using the Oracle JET grid system, and you should review them to get accustomed to the grid system.

About the Grid System

Oracle JET provides a 12-column responsive mobile-first grid system that you can use for responsive design. The grid builds upon the Oracle JET flex layout and allows you to specify the widths of each flex item using sizing classes for small, medium, large, and extra-large screens.

For example, you can use the grid classes to change the default display in the Flex Layouts Auto example to use different widths for the flex items when the screen size changes. As shown in the image below, the flex layout by default will allocate the unused space evenly to the three flex items regardless of the screen size.

When the defaults are not sufficient, you can specify relative widths for the flex items when the screen size changes. In the following image, the flex layout is using grid classes to define different widths when the screen size changes to medium, large, and extra large.

The grid classes follow the Oracle JET Flex, Grid, Form, and Responsive Helper Class Naming Convention. Use oj-size-numberofcolumns to set the width to the specified numberofcolumns when the screen is the specified size or larger. For example:

  • oj-sm-6 works on all screen sizes and sets the width to 6 columns.

  • oj-lg-3 sets the width to 3 columns on large and extra-large screens.

  • oj-sm-6 and oj-lg-3 on the same flex item sets the width to 6 columns wide on small and medium screens and 3 columns wide on large and extra-large screens.

Design for the smallest screen size first and then customize for larger screens as needed. You can further customize the grid by adding one of the Grid Convenience Classes or by using one of the responsive helper classes described in Using the Responsive Helper Classes.

The following code sample shows the markup for the modified Flex Auto Layout display, with grid classes defined for medium, large, and extra-large screens.

<div class="oj-flex">
  <div class="oj-md-6 oj-lg-2 oj-xl-8 oj-flex-item">A</div>
  <div class="oj-md-3 oj-lg-4 oj-xl-2 oj-flex-item">B</div>
  <div class="oj-md-3 oj-lg-6 oj-xl-2 oj-flex-item">C</div>
</div>

When the screen size is small, the flex layout default styles are used, and each item uses the same amount of space. When the screen size is medium, the A flex item will use 6 columns, and the B and C flex items will each use 3 columns. When the screen size is large, The A flex item will use 2 columns, the B flex item will use 4 columns, and the C flex item will use 6 columns. Finally, when the screen size is extra large, the A flex item will use 8 columns, and the B and C flex items will each use 2 columns.

For a complete example that illustrates working with the grid system, see Responsive Grids.

The Grid System and Printing

The Oracle JET grid system applies the large styles for printing in landscape mode and the medium style for printing in portrait mode if they are defined. You can use the defaults or customize printing using the print style classes.

In the grid example below, Row 2 and Row 4 include the oj-md-* style classes. Row 3 and Row 4 include the oj-lg-4 style for all columns in the row.

<div class="demo-grid-sizes demo-flex-display">
  <div class="oj-flex oj-flex-items-pad">
    <div class="oj-sm-9 oj-flex-item"></div>
    <div class="oj-sm-3 oj-flex-item"></div>
  </div>
  <div class="oj-flex oj-flex-items-pad">
    <div class="oj-sm-6 oj-md-9 oj-flex-item"></div>
    <div class="oj-sm-6 oj-md-3 oj-flex-item"></div>
  </div>
  <div class="oj-flex oj-flex-items-pad">
    <div class="oj-sm-6 oj-lg-4 oj-flex-item"></div>
    <div class="oj-sm-4 oj-lg-4 oj-flex-item"></div>
    <div class="oj-sm-2 oj-lg-4 oj-flex-item"></div>
  </div>
  <div class="oj-flex oj-flex-items-pad ">
    <div class="oj-sm-8 oj-md-6 oj-lg-4 oj-xl-2 oj-flex-item"></div>
    <div class="oj-sm-2 oj-md-3 oj-lg-4 oj-xl-8 oj-flex-item"></div>
    <div class="oj-sm-2 oj-md-3 oj-lg-4 oj-xl-2 oj-flex-item"></div>
  </div>
</div>

As shown in the following print preview, when you print this grid in landscape mode, the oj-lg-4 style classes will be applied on Row 3 and Row 4. When you print the grid in portrait mode, the oj-md-* style classes apply on Row 2 and Row 4.

If you want to change the printing default, you can set the Sass $responsiveQueryPrint variable to print in a custom settings file. After you enable the print classes, you can add the oj-print-numberofcolumns style class to the column definition. This has the effect of changing the column sizes for printing purposes only. In the following example, Row 1 includes the oj-print-6 class for each column in the row.

<div class="oj-flex oj-flex-items-pad">
  <div class="oj-sm-9 oj-print-6 oj-flex-item"></div>
  <div class="oj-sm-3 oj-print-6 oj-flex-item"></div>
</div>

In normal mode, Row 1 contains two columns, one column with a size of 9 and one column with a size of 3, regardless of screen size. If you do a print preview, however, you'll see that Row 1 will print with two columns in portrait and landscape mode, both with a size of 6.

For information about setting Sass variables in a custom settings file, see Customizing Themes Using the Tooling Framework.

Grid Convenience Classes

Oracle JET's grid system includes convenience classes that make it easier to create two- and four- column layouts with specified widths.

  • oj-size-odd-cols-numberofcolumns: Use this in a 2-column layout. Instead of putting sizing classes on every column, 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 medium-size screens and higher.

    The code sample below shows the grid configuration used to render the figure. The example also sets oj-sm-odd-cols-12 which will set the odd column width to 12 on small screens, displaying col2 on a new row.

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

    You could achieve the same effect by defining oj-md-4 for the first column's width and oj-md-8 for the second column's width on each flex item.

    <div class="oj-flex-items-pad"
      <div class="oj-flex">
        <div class="oj-sm-12 oj-md-4 oj-flex-item">col 1</div>
        <div class="oj-sm-12 oj-md-8 oj-flex-item">col 2</div>
      </div>      
      <div class="oj-flex">
        <div class="oj-sm-12 oj-md-4 oj-flex-item">col 1</div>
        <div class="oj-sm-12 oj-md-8 oj-flex-item">col 2</div>
      </div>
      <div class="oj-flex">
        <div class="oj-sm-12 oj-md-4 oj-flex-item">col 1</div>
        <div class="oj-sm-12 oj-md-8 oj-flex-item">col 2</div>
      </div>
    </div>
    

    oj-size-even-cols-numberofcolumns: 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.

    The code sample below shows the grid configuration used to render the figure.

    <div class="oj-sm-odd-cols-12 oj-md-odd-cols-2 oj-md-even-cols-4 oj-flex-items-pad">
      <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 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>
    

    If you don't use the convenience classes, you must define the size classes on every column in every row as shown below.

    <div class="oj-flex-items-pad">
      <div class="oj-flex">
        <div class="oj-sm-odd-cols-12 oj-md-2 oj-flex-item">col 1</div>
        <div class="oj-sm-odd-cols-12 oj-md-4 oj-flex-item">col 2</div>
        <div class="oj-sm-odd-cols-12 oj-md-2 oj-flex-item">col 3</div>
        <div class="oj-sm-odd-cols-12 oj-md-4 oj-flex-item">col 4</div>
      </div>     
      <div class="oj-flex">
        <div class="oj-sm-odd-cols-12 oj-md-2 oj-flex-item">col 1</div>
        <div class="oj-sm-odd-cols-12 oj-md-4 oj-flex-item">col 2</div>
        <div class="oj-sm-odd-cols-12 oj-md-2 oj-flex-item">col 3</div>
        <div class="oj-sm-odd-cols-12 oj-md-4 oj-flex-item">col 4</div>
      </div>
    </div>