Layout settings are available for all components that can group other types of elements (for example, Containers or Cards).
The layout configuration settings enable users to customize key properties, including layout direction, alignment, gap, sizing, and spacing, to create visually appealing and functional designs.
These settings can be applied practically in various ways, depending on the context and purpose of the design:
The Linear layout arranges child elements in a single line, either horizontally or vertically.
Display Mode
Linear: Selected by default for arranging child elements in a linear fashion.
Direction
Justify
Controls the alignment of child elements along the main axis (the direction set by Horizontal or Vertical).
Options include:
Align
Controls the alignment of child elements along the cross axis (perpendicular to the main axis).
Options include:
Wrap
Gap
Sets the spacing between child elements, measured in pixels.
To better understand how these layout configurations work and see real-time feedback on different combinations, please refer to the following link:
In addition to linear (flex-based) layouts, you can configure components using a grid layout. This option is particularly useful for designs requiring a more structured and multi-dimensional arrangement of elements.
For components that contain child elements (such as Containers, Cards, and Forms), you can easily switch between a linear layout and a Grid layout using a layout picker. The default layout is linear, but you can select Grid to arrange your content in a more structured way.
You can configure different layout settings for different platforms. For example, you can opt for a grid layout on the web but switch to a linear layout on mobile for a more streamlined user experience. This flexibility ensures that the design is responsive and optimized for each platform, improving usability across different devices.
Once the Grid layout is selected, you can define the number of columns. Initially, the columns will be distributed equally, meaning all columns will have the same width. Additional customization options include:
When configuring a grid, individual child components can be further customized:
Col Span should not exceed the number of parent grid columns.
The Order property controls the arrangement of elements within grid layouts. By default, elements follow the order in which they appear in the parent component’s array. However, this order can be customized using the following options:
0
).-999
.999
.Example: In a Grid with 10 elements, setting one element’s order to 5
while the others are set to auto
(which equals 0
) will place that element last, because 5
is greater than 0
.
Proper alignment within grid layouts is essential, particularly when working with fixed-width columns or rows. By default, child elements will inherit alignment settings from their parent component, ensuring a consistent look and feel.
However, you have the flexibility to override these default settings for individual child elements, allowing precise control over horizontal and vertical alignment. This customization is key to achieving the desired visual structure, especially when certain elements need specific positioning within the grid.
gridLayout
property:
gridChild
property, depending on their parent component’s layout.gridLayout
property specifies only the number of columns, rowGap, and columnGap.gridChild
property.Use case: Customer Information Form
This scenario involves a banking application that requires detailed input from a company representative, either during onboarding or for a loan application. Given the need to gather extensive information, a form with a 2-column grid layout is used to ensure clean and consistent alignment of fields.
For forms requiring additional inputs, consider adjusting the Columns property to match the number of fields needed. Expanding the form layout will help organize the inputs efficiently and improve user experience.
Role and Name
Shareholder Status
Personal Details
Contact Details
Residence Address
Employment Seniority
Union Membership
To ensure an optimal user experience and consistent visual design, consider these best practices when using grid layouts:
Minimize Fixed Widths: Avoid using fixed widths for child components in a grid. Relying on flexible sizing allows the grid to adapt smoothly across different screen sizes and devices. Only use fixed widths when absolutely necessary (e.g., for icons or buttons with defined sizes).
Consider Total Width: If you know the width of the screen is X
, ensure that the total width of your fixed-width elements doesn’t exceed X
. This prevents layout issues like content overflow or misalignment across different devices.
Use Column Span Thoughtfully: When setting the columnSpan
for a grid child, ensure that the total spans across all elements do not exceed the number of columns. This ensures a consistent and predictable layout.
Avoid Overcrowding: When adding numerous child components to a grid, be mindful of spacing (gaps) between elements. Proper use of rowGap
and columnGap
helps maintain clarity and reduces visual clutter.
Leverage Default Inheritance: Utilize the default alignment inheritance from the parent grid to ensure consistency. Only override alignment on child components when specific visual differences are needed.
Use Auto
Order When Possible: Stick with the auto
order setting for most child components, unless a specific element needs to appear first or last. This will help maintain logical reading and visual flow without complex manual ordering.
Always Be Mindful of Mobile Screen Width: When designing for mobile, always consider the narrower screen width. Ensure that grid layouts adapt gracefully, perhaps switching from a grid to a linear layout, or adjusting spacing and sizing to fit within the mobile screen’s constraints without causing overflow or misalignment.
Test Across Platforms: Given potential differences in behavior between web, iOS, and Android platforms, test your grid layout across these platforms to ensure consistent performance and avoid unexpected behavior like overflow or misalignment.
Avoid Fixed Widths on Columns: Instead of setting fixed widths on the entire column, apply fixed widths to the individual elements inside the grid cells. This ensures more flexible layouts that adapt to different screen sizes, especially on mobile devices, without causing issues like overflow or misalignment.
I have a Grid with 10 elements, and I set one element's order to `5`. Why is it not displayed as the fifth element?
A: The order property works relative to other elements. If other elements are set to auto
(which equals 0
), then the element with order 5
will be placed after all the 0
elements, making it appear last.
What should I be cautious about when working with a Grid layout?
A: Be careful with using fixed widths in Grid layouts. Fixed widths can lead to unexpected behavior, especially on different devices. It’s better to use flexible sizing options whenever possible to maintain a responsive and predictable design.
Layout settings are available for all components that can group other types of elements (for example, Containers or Cards).
The layout configuration settings enable users to customize key properties, including layout direction, alignment, gap, sizing, and spacing, to create visually appealing and functional designs.
These settings can be applied practically in various ways, depending on the context and purpose of the design:
The Linear layout arranges child elements in a single line, either horizontally or vertically.
Display Mode
Linear: Selected by default for arranging child elements in a linear fashion.
Direction
Justify
Controls the alignment of child elements along the main axis (the direction set by Horizontal or Vertical).
Options include:
Align
Controls the alignment of child elements along the cross axis (perpendicular to the main axis).
Options include:
Wrap
Gap
Sets the spacing between child elements, measured in pixels.
To better understand how these layout configurations work and see real-time feedback on different combinations, please refer to the following link:
In addition to linear (flex-based) layouts, you can configure components using a grid layout. This option is particularly useful for designs requiring a more structured and multi-dimensional arrangement of elements.
For components that contain child elements (such as Containers, Cards, and Forms), you can easily switch between a linear layout and a Grid layout using a layout picker. The default layout is linear, but you can select Grid to arrange your content in a more structured way.
You can configure different layout settings for different platforms. For example, you can opt for a grid layout on the web but switch to a linear layout on mobile for a more streamlined user experience. This flexibility ensures that the design is responsive and optimized for each platform, improving usability across different devices.
Once the Grid layout is selected, you can define the number of columns. Initially, the columns will be distributed equally, meaning all columns will have the same width. Additional customization options include:
When configuring a grid, individual child components can be further customized:
Col Span should not exceed the number of parent grid columns.
The Order property controls the arrangement of elements within grid layouts. By default, elements follow the order in which they appear in the parent component’s array. However, this order can be customized using the following options:
0
).-999
.999
.Example: In a Grid with 10 elements, setting one element’s order to 5
while the others are set to auto
(which equals 0
) will place that element last, because 5
is greater than 0
.
Proper alignment within grid layouts is essential, particularly when working with fixed-width columns or rows. By default, child elements will inherit alignment settings from their parent component, ensuring a consistent look and feel.
However, you have the flexibility to override these default settings for individual child elements, allowing precise control over horizontal and vertical alignment. This customization is key to achieving the desired visual structure, especially when certain elements need specific positioning within the grid.
gridLayout
property:
gridChild
property, depending on their parent component’s layout.gridLayout
property specifies only the number of columns, rowGap, and columnGap.gridChild
property.Use case: Customer Information Form
This scenario involves a banking application that requires detailed input from a company representative, either during onboarding or for a loan application. Given the need to gather extensive information, a form with a 2-column grid layout is used to ensure clean and consistent alignment of fields.
For forms requiring additional inputs, consider adjusting the Columns property to match the number of fields needed. Expanding the form layout will help organize the inputs efficiently and improve user experience.
Role and Name
Shareholder Status
Personal Details
Contact Details
Residence Address
Employment Seniority
Union Membership
To ensure an optimal user experience and consistent visual design, consider these best practices when using grid layouts:
Minimize Fixed Widths: Avoid using fixed widths for child components in a grid. Relying on flexible sizing allows the grid to adapt smoothly across different screen sizes and devices. Only use fixed widths when absolutely necessary (e.g., for icons or buttons with defined sizes).
Consider Total Width: If you know the width of the screen is X
, ensure that the total width of your fixed-width elements doesn’t exceed X
. This prevents layout issues like content overflow or misalignment across different devices.
Use Column Span Thoughtfully: When setting the columnSpan
for a grid child, ensure that the total spans across all elements do not exceed the number of columns. This ensures a consistent and predictable layout.
Avoid Overcrowding: When adding numerous child components to a grid, be mindful of spacing (gaps) between elements. Proper use of rowGap
and columnGap
helps maintain clarity and reduces visual clutter.
Leverage Default Inheritance: Utilize the default alignment inheritance from the parent grid to ensure consistency. Only override alignment on child components when specific visual differences are needed.
Use Auto
Order When Possible: Stick with the auto
order setting for most child components, unless a specific element needs to appear first or last. This will help maintain logical reading and visual flow without complex manual ordering.
Always Be Mindful of Mobile Screen Width: When designing for mobile, always consider the narrower screen width. Ensure that grid layouts adapt gracefully, perhaps switching from a grid to a linear layout, or adjusting spacing and sizing to fit within the mobile screen’s constraints without causing overflow or misalignment.
Test Across Platforms: Given potential differences in behavior between web, iOS, and Android platforms, test your grid layout across these platforms to ensure consistent performance and avoid unexpected behavior like overflow or misalignment.
Avoid Fixed Widths on Columns: Instead of setting fixed widths on the entire column, apply fixed widths to the individual elements inside the grid cells. This ensures more flexible layouts that adapt to different screen sizes, especially on mobile devices, without causing issues like overflow or misalignment.
I have a Grid with 10 elements, and I set one element's order to `5`. Why is it not displayed as the fifth element?
A: The order property works relative to other elements. If other elements are set to auto
(which equals 0
), then the element with order 5
will be placed after all the 0
elements, making it appear last.
What should I be cautious about when working with a Grid layout?
A: Be careful with using fixed widths in Grid layouts. Fixed widths can lead to unexpected behavior, especially on different devices. It’s better to use flexible sizing options whenever possible to maintain a responsive and predictable design.