Layout

The Layout panel contains all layout related styles. The primary options being the display property and includes block, inline, flex, grid and their variants.

In general the Layout options only need to be set if the browsers normal flow needs to be altered.

Display

display

The display property controls how an element is displayed in the layout — it defines whether it behaves like a block, inline, or something more complex.

Values

• block – Element takes up the full width and starts on a new line (like <div>).
• flex – Turns the element into a flex container (for flexbox layouts).
• grid – Turns the element into a grid container (for grid layouts).
• inline – Element only takes up as much space as needed, and stays in line (like <span>).
• inline-block – Like inline, but you can set width and height.
• inline-flex – Flex container that behaves like an inline element.
• inline-grid – Grid container that behaves like an inline element.
• list-item – Element behaves like a list item that can be styled with list-style properties.
• none – Element is completely removed from the layout

Alignment

Used with the flex or grid display property values.

Both Flexbox and CSS Grid have several alignment and justification properties to control how items are distributed and positioned within a container.

• justify-* properties deal with spacing and alignment along the main axis (horizontal in a row, vertical in a column).
• align-* properties deal with spacing and alignment along the cross axis (vertical in a row, horizontal in a column).

CSS Grid Alignment and Justification

Justify Content

justify-content

Justifies the grid within the container (main axis – horizontal)

start, end, center, stretch, space-around, space-between, space-evenly, left, right

Align Content

align-content

Aligns the grid within the container (cross axis – vertical)

values: start, end, center, stretch, space-around, space-between, space-evenly

Justify Items

Justifies grid items inside their cells (main axis – horizontal)

values: start, end, center, stretch, left, right, baseline, first baseline, last baseline

Align Items

align-items

Aligns grid items inside their cells (cross axis – vertical)

values: start, end, center, stretch, baseline, first baseline, last baseline

Justify Self

justify-self

Justifies an individual grid item (main axis – horizontal)

values: start, end, center, stretch, left, right, baseline, first baseline, last baseline

Align Self

values: align-self

Aligns an individual grid item (cross axis – vertical)

start, end, center, stretch, baseline, first baseline, last baseline

Flexbox Alignment and Justification

Justify Content

justify-content

Justifies flex items along the main axis (row or column direction)

values: flex-start, flex-end, center, space-around, space-between, space-evenly, left, right, start, end

Align Content

align-content

Aligns multiple flex lines within the container (cross axis – when wrapping)

values: flex-start, flex-end, center, stretch, space-around, space-between, space-evenly, start, end

Align Items

align-items

Aligns individual flex items along the cross axis

values: flex-start, flex-end, center, stretch, baseline, start, end, first baseline, last baseline

Align Self

align-self

Aligns a single flex item within its container

values: auto, flex-start, flex-end, center, stretch, baseline, start, end, first baseline, last baseline

Grid Layout

Use with display: grid to create a CSS Grid Layout and position grid items.

Grid Template Columns

grid-template-columns

Specify the Column pattern for the grid by entering the necessary values or choosing from the grid presets:

Grid Template Rows

grid-template-rows

Specify the Row pattern for the Grid. If this properties value is left empty then CSS grid will automatically create new rows as required. For example: 6 items inside 3 column grid will display as 2 rows.

Column Gap

column-gap

Set the column gap between items.

Row Gap

row-gap

Set the row gap between items

Grid Auto Flow

grid-auto-flow

control the automatic placement of grid items when they are not explicitly placed using properties such as grid-row or grid-column

• row
• column
• dense
• row dense
• column dense

Grid Column

grid-column

specify the column area a grid item occupies, by defining its starting line and its ending line or a number of columns to span.

Example value	Description
1	Place the item in the first column
1 / 3	Place the items start at line 1 and its end at line 3.
1 / span 2	Place the item in the first column and have it span 2 columns.
1 / -1	Place the item in the first column and have it span the entire width of the grid

Grid Row

grid-row

specify the row area a grid item occupies, by defining its starting line and its ending line or a number of rows to span.

Example value	Description
1	Place the item in the first row
1 / 3	Place the items start at row line 1 and its end at row line 3.
1 / span 2	Place the item in the first row and have it span 2 rows.
1 / -1	Place the item in the first row and have it span the entire height of the grid

Order

order

Set an integer value to define the display order of the grid item.

Flex Layout

Use with display: flex to create a Flexbox Loyout and position flex items.

Flex Direction

flex-direction

Set the direction in which items are placed into the flexbox layout.

• row
• column
• row-reverse
• column-reverse

Flex Wrap

flex-wrap

define whether to wrap to new rows / columns when there is no more space to accommodate additional items.

• no-wrap
• wrap
• reverse-wrap

Column Gap

column-gap

Set the column gap between items.

Row Gap

row-gap

Set the row gap between items

Flex Grow

flex-grow

Controls how much an item expands when there is extra space.

• 0 → No growth.
• 1+ → Grows relative to other items.

Flex Shrink

flex-shrink

Controls how much an item shrinks when space is limited.

• 0 → No shrinking.
• 1+ → Shrinks relative to other items.

Flex Basis

flex-basis

Defines the initial size of an item before grow or shrink apply.

Order

order

Set an integer value to define the display order of the grid item.

Container Queries

Set the Container Type and Container Name for defining an @container query container.

Container Type

container-type

Container Name

container-name

Floats

Float the block within its parent container.

Float

float

• none
• left
• right
• inline-start
• inline-end

Clear

clear

• none
• left
• right
• both