Layout design

In the Layout section, you can pick six different ways to display your content.

Block

These elements spread over the full width of their parent element. Each block element starts on a new line (vertically) and takes up all the width space that’s available.

Blocks are great to position things below each other. If you have three images in block elements, they will be vertically stacked—even when there’s enough space to fit the images next to each other. If you want to place the images horizontally on one line, you’ll need to use inline.

Inline block

Inline blocks combine the best of both worlds. Like blocks, they can have a set height and width. And because it’s inline, elements are placed side-by-side on the same line (as long as there is enough space available).

Inline

Inline means the elements inside are placed in-line, so horizontally next to each other. Unlike block elements, the height and width cannot be manually set. An inline element will adapt to the other content that’s placed in the same line.

Flex

Yep, you guessed it. These elements have a flexible structure and you can arrange them either horizontally or vertically. You decide how they’re stacked, aligned, justified and wrapped within the flex container. Flex containers dynamically expand to fill all available free space, and shrink so the content doesn’t overflow.

Grid

In this layout structure, elements are positioned within rows and columns. For each grid item, you can decide how content is positioned, aligned and distributed.

Tip: The difference between grid and flex containers, is that grids are two-dimensional. You can control the layout both horizontally and vertically. Flex containers are one-dimensional, so you have to pick one direction to control.

Hidden

By hiding a container, the container space will remain but you will not see its content. It’s gone, but not really… (kind of like your grandpa making a coin “disappear”, only to find it again right behind your ear).

This option is often used to hide elements that first need to become visible when a visitor clicks a button. You can also use this option to hide elements on mobile devices (e.g. a print button).

I'm ready for more
Read more

Get your no-code fix

Join our monthly email with no-code insights and Ycode updates.
.
2019 - 2021 © Ycode. All rights reserved.
Terms & Policies