Adjust settings

Configuration settings manage the arrangement behavior of child components within a parent container. By utilizing various adjustment settings, you can regulate layout in one or two dimensions and manage how components are showcased in relation to one another.

Within this tutorial, you will become familiar with each customization setting in the Style panel > Layout segment:

1. Elementary
2. Elastic
3. Gridded
4. Inline element
5. Flex inline
6. Grid inline
7. Inline composition
8. vanish

Elementary

Elementary is the pre-set adjustment setting for most components. Every child component in an elementary parent element commences on a fresh line and occupies the complete width of its parent element unless a custom width is designated.

Elastic

Flexible box organizes immediate children components in one dimension — either horizontally or vertically. You have the ability to personalize the direction in which the immediate children stack, how they are arranged and justified within the parent element, whether there is a gap between them, and if they transition to the next line.

Upon establishing an elastic parent element, all immediate children of that parent element become elastic children. You can substitute elastic child adjustment settings (e.g., size, arrangement, sequence) in the Elastic child settings.

Gridded

Grid design organizes immediate children in two dimensions — both horizontally and vertically — in columns and rows. You can customize how the immediate children are positioned, aligned, and apportioned within the grid, and introduce spaces between columns and rows. You can modify grid child adjustment settings (i.e., position, spans, alignment, justification, and sequence) in the Grid child settings.

While determining grid proportions, you can employ the FR unit — which automatically computes row and column space while adapting for spaces — to establish fluid grids.

Inline element

Child components in an inline element parent are arranged next to each other, and their width is based on the content within. Children wrap when the content reaches the parent element’s boundary.

Reminder: When utilizing inline element, blanks in HTML transform into visible space in the site design. Discover how to handle spaces between inline element components.

Flex inline

Flex inline presents an element as an inline-level flexible container. Child components in a flex inline parent are aligned according to the flexbox model. Essentially, the flex container transforms into an inline element, while its children are laid out as flex items.

Grid inline

Grid inline showcases an element as an inline-level gridded container. Child components in a grid inline parent are arranged according to the grid model. Comparatively to flex inline, grid inline unites the inline-level behavior of the parent element with the flexibility of grid layout for its children.

Inline composition

Inline composition is the pre-set adjustment setting for any text content within an element. You can amend the layout of an inline element by adjusting its margins and padding, albeit you are unable to modify its width or height.

Vanish

You can employ the Vanish adjustment setting to entirely conceal an element. Elements configured to vanish are not displayed by the browser, which can be advantageous for altering how content is showcased on mobile devices. Elements set to vanish are also excluded from the accessibility structure, rendering the element and its children inaccessible to assistive technology like screen readers.