Layout & Design

Question 1

What is the Display Settings?

Answer 1

Located in the style panel, control the layout behavior of an element and the content around that element. Here, you can control how elements are displayed in relation to each other - whether they’re stacked on top of one another or laid out side by side.

Question 2

What are the 6 display settings?

Answer 2

Block, Flexbox, Grid, Inline Block, Inline, and None

Question 3

Block

Answer 3

Block is the default display setting for most elements. Each block element starts on a new line and takes up the full width of its parent element unless a custom width is set.

Regardless of its width, each block element will push the next element onto a new line. To lay elements side by side, select a different layout setting, such as inline-block.

Question 4

Flexbox

Answer 4

Elements with a flex layout arrange their children horizontally or vertically.

You can customize how the direct children stack, when they wrap, how they are aligned and justified within the flex container.

When you create a flex container, all direct children of that parent element become flex children. You can add to and override the layout of flex children in the flex child settings.

Question 5

Grid

Answer 5

Elements with a grid layout arrange their direct children across multiple columns and rows.

You can customize how the direct children are positioned, aligned, and distributed within the grid components: the container, the individual cells, group of cells, or tracks.

Question 6

Grid vs Flex

Answer 6

Flexbox and grid are both great layout options. Flexbox gives you layout controls in one dimension — either vertical or horizontal. Grid gives you layout controls that work in two-dimensions, which is great for magazine layouts, for example.

Question 7

Inline block

Answer 7

Inline-block elements are stacked side-by-side and their width is determined by the content inside.

Inline-block elements will also wrap when the content hits the boundary of the parent element. In the Style panel, you can apply specific width, height, padding, and margin settings to inline-block elements.

Question 8

Inline

Answer 8

Inline is the default display setting for any text content inside an element. You can change the layout of an inline element by changing its margins and padding but you cannot change its width or height.

Question 9

Display: none

Answer 9

To hide an element completely, set its display setting to none. Elements set to display none will not be rendered by the browser, which can be handy for altering how content displays on mobile devices.