Styling: ResponsiveGrid

Set the number of grid columns, with a maximum of 12. Start by coding for small screens, then customize for larger screens as necessary. Here are 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. In Redwood these classes use the !important rule.

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. In Redwood these classes use the !important rule.

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. In Redwood these classes use the !important rule.