-
Category: Tile Size
-
Masonry tiles can be of pre-defined sizes spanning 1 to 3 columns and rows. There is a specific style class for each of the supported sizes. Use these classes on child elements of oj-masonry-layout.
Class template:
-
.oj-masonrylayout-tile-
[tile-size]
Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.
-
Values for
[tile-size]
Value (required) Name Description 1x1
Tile 1x1 A tile that spans 1 column and 1 row. 1x2
Tile 1x2 A tile that spans 1 column and 2 rows. 1x3
Tile 1x3 A tile that spans 1 column and 3 rows. 2x1
Tile 2x1 A tile that spans 2 columns and 1 row. 2x2
Tile 2x2 A tile that spans 2 columns and 2 rows. 2x3
Tile 2x3 A tile that spans 2 columns and 3 rows. 3x1
Tile 3x1 A tile that spans 3 columns and 1 row. 3x2
Tile 3x2 A tile that spans 3 columns and 2 rows. 3x3
Tile 3x3 A tile that spans 3 columns and 3 rows.
Example
<oj-masonry-layout> <div class="oj-masonrylayout-tile-1x1"> <!-- Content 1 --> </div> <div class="oj-masonrylayout-tile-2x3"> <!-- Content 2 --> </div> </oj-masonry-layout>
-
-
CSS Variables
-
Masonry Layout Tile CSS
See JET CSS Variables for additional details.
Name | Type | Description |
---|---|---|
--oj-masonry-layout-tile-width |
<length> | Masonry layout tile width |
--oj-masonry-layout-tile-height |
<length> | Masonry layout tile height |