Set a Page's Layout
All pages have a preferred layout, and you can add additional layout containers and components within this layout to design your pages.
| Layout Type | Image | Description |
|---|---|---|
| Flex |  |
The Flex layout lets you add components in rows of any size. In a flex layout, you can lay out the children of a flex container in any direction, and the children will grow to fill unused space or shrink to avoid overflowing the parent. You can also nest boxes (for example, horizontal inside vertical or vertical inside horizontal) to build layouts in two dimensions.
The Flex layout provides the most flexibility and you can adjust several properties for alignment, justification, and so on, in the Properties pane. |
| Grid (default) |  |
The Grid layout builds on the Flex layout, but adds a 12-column grid and rows that make it easier to align elements when you position them. The pages in your application incorporate responsive design to resize gracefully based on the size of the display area of the device. |
| Block |  |
The Block layout displays components that you drop on a page as blocks; each component starts on a new line and takes up as much horizontal space as it can. This layout is useful when your app already includes hand-coded pages, or when you want to drop a few components on a new page and manually adjust the layout. |
| Container Components | Description |
|---|---|
| Flex Container | The flex container is a flexible container which is useful for responsive designs that optimize the use of the available space. |
| Grid Container | The grid container is a 12-column grid that is useful when you want to align components precisely according to the grid. |
| Bar Container | The bar container is a three-section layout containing a start and end section sized to its content and a middle section that stretches. |
| Form Layout | The form layout is optimized to display the label and input pairs commonly used in forms. |
| Masonry Layout | The masonry layout is a responsive grid of tiles containing arbitrary content. You can specify the size of each tile in the Properties pane. |
See the Layout & Nav section in the Oracle JET Developer Cookbook for examples of how you can use various layout components.
To add a layout container or component to a page:
- Drag the layout container or component from the Components palette and place it on the canvas.
When a container is dragged onto the canvas, the locations where the component can be placed are highlighted on the canvas. If you do not place the component in an existing row, a new row containing the component is created when you place it on the page. For example, here's what your canvas might look when you're dragging a Flex container on a Grid layout:
Description of the illustration page-designer-components-addlayout.pngIf you were dragging the same components on a page that uses the Block layout, your view might be something like this:
Description of the illustration page-designer-components-blocklayout.pngNotice how the Grid Container and Masonry Layout components in the Structure view aren't automatically enclosed in rows. That's because unlike the Grid or Flex layout, components dropped on a page that uses the Block layout aren't automatically wrapped in Grid or Flex rows.
It's also possible to combine layout types in your page by creating new rows in the page, placing multiple layouts within rows, and by nesting layouts. Each row in a page can have a Flex, Grid, or Bar container. When you drag an element onto the canvas, some elements will expand to fit all the available columns in the row. Other elements have a default column span that you can adjust.
Description of the illustration layout-combined.png - Select the component and modify its properties in the Properties pane. You can modify the display settings of each row in a layout to control the layout of the components within the row.
