Layout

Overview of the Phoenix LiveView Layout Component

The Phoenix LiveView layout component component is customizable utility for building responsive UI structures using Tailwind CSS. It wraps flex and grid systems in a clean interface that allows you to control spacing, alignment, order, direction, and more.

Flex – I’m shown last

Flex – I’m in the middle

Flex – I’m shown first

Grid – Column 1

Grid – Column 2

Grid – Full Width Card

Flex Component

The flex component provides a clean abstraction over Tailwind’s flexbox utilities. Below is a breakdown of all available props with examples.

Item A

Item B

Item C

<.flex></.flex>

Grid Component

Item A

Item B

Item C

<.grid></.grid>

Direction prop

Sets the direction of flex items inside the container (row or column).

Item A

Item B

<.flex direction="col"></.flex>
<.flex direction="col"></.flex>
<.flex direction="col"></.flex>
<.flex direction="col"></.flex>

Justify prop

Controls horizontal alignment of children inside the container.

Centered

<.flex justify="start"></.flex>
<.flex justify="center"></.flex>
<.flex justify="end"></.flex>
<.flex justify="between"></.flex>
<.flex justify="around"></.flex>
<.flex justify="evenly"></.flex>

Align prop

Controls vertical alignment of items along the cross axis.

Vertically centered

<.flex align="start"></.flex>
<.flex align="center"></.flex>
<.flex align="end"></.flex>
<.flex align="stretch"></.flex>
<.flex align="baseline"></.flex>

Gap prop

Sets the spacing between child elements using Tailwind's gap utilities.

<.flex gap="extra_small"></.flex>
<.flex gap="small"></.flex>
<.flex gap="medium"></.flex>
<.flex gap="large"></.flex>
<.grid gap="extra_large"></.grid>

Wrap prop

Enables or disables flex wrapping when items overflow the container.

<.flex wrap="nowrap"></.flex>
<.flex wrap="wrap"></.flex>
<.flex wrap="wrap-reverse"></.flex>

Grow prop

Allows a flex item to grow and fill remaining space.

Grows

Normal

<.flex grow="grow"></.flex>
<.flex grow="none"></.flex>

Shrink prop

Specifies whether a flex item can shrink if needed.

Shrinkable

Fixed

<.flex shrink="shrink"></.flex>
<.flex shrink="none"></.flex>

Basis prop

Sets the initial size of a flex item before remaining space is distributed.

1/3 width

Auto

<.flex basis="extra_small"></.flex>
<.flex basis="small"></.flex>
<.flex basis="medium"></.flex>
<.flex basis="large"></.flex>
<.flex basis="extra_large"></.flex>

Order prop

Controls the visual order of flex items regardless of their source order in the DOM.

Last

Middle

First

<.flex order="first"></.flex>
<.grid order="last"></.grid>
<.flex order="none"></.flex>

Last

Middle

First

<.flex align_self="auto"></.flex>
<.flex align_self="start"></.flex>
<.flex align_self="center"></.flex>
<.flex align_self="end"></.flex>
<.grid align_self="stretch"></.grid>

Align self prop

Controlling how an individual flex or grid item is positioned along its container's cross axis.

Last

Middle

First

<.flex align_self="auto"></.flex>
<.flex align_self="start"></.flex>
<.flex align_self="center"></.flex>
<.flex align_self="end"></.flex>
<.grid align_self="stretch"></.grid>

Grid cols prop

Sets the number of columns in the grid layout.

Col 1

Col 2

Col 3

<.grid cols="one"></.grid>
<.grid cols="two"></.grid>
<.grid cols="three"></.grid>
<.grid cols="four"></.grid>
<.grid cols="five"></.grid>
<.grid cols="six"></.grid>
<.grid cols="seven"></.grid>
<.grid cols="eight"></.grid>
<.grid cols="nine"></.grid>
<.grid cols="ten"></.grid>
<.grid cols="eleven"></.grid>
<.grid cols="twelve"></.grid>
<.grid cols="none"></.grid>

Rows prop

Defines the number of rows in the grid layout.

<.grid rows="one"></.grid>
<.grid rows="two"></.grid>
<.grid rows="three"></.grid>
<.grid rows="four"></.grid>
<.grid rows="five"></.grid>
<.grid rows="six"></.grid>
<.grid rows="none"></.grid>

Auto cols prop

Sets the size of implicit columns (auto-generated by the browser).

<.grid auto_cols="auto"></.grid>
<.grid auto_cols="min"></.grid>
<.grid auto_cols="max"></.grid>
<.grid auto_cols="fr"></.grid>

Auto rows prop

Sets the size of implicit rows in the layout.

Row A

Row B

<.grid auto_rows="auto"></.grid>
<.grid auto_rows="min"></.grid>
<.grid auto_rows="max"></.grid>
<.grid auto_rows="fr"></.grid>

Auto flow prop

Controls the direction of auto-placed items in the grid (row or column).

<.grid auto_flow="row"></.grid>
<.grid auto_flow="col"></.grid>
<.grid auto_flow="row-dense"></.grid>
<.grid auto_flow="col-dense"></.grid>

Justify items prop

Controls how grid items align horizontally inside their cells.

Centered 1

Centered 2

<.grid justify_self="auto"></.grid>
<.grid justify_self="start"></.grid>
<.grid justify_self="end"></.grid>
<.grid justify_self="center"></.grid>
<.grid justify_self="stretch"></.grid>

Align content prop

Defines how multiple rows align in the grid container.

Top

Bottom

<.grid align_content="start"></.grid>
<.grid align_content="center"></.grid>
<.grid align_content="end"></.grid>
<.grid align_content="between"></.grid>
<.grid align_content="around"></.grid>
<.grid align_content="evenly"></.grid>

Place content prop

Shorthand for aligning content both horizontally and vertically inside the grid.

One

Two

<.grid place_content="start"></.grid>
<.grid place_content="center"></.grid>
<.grid place_content="end"></.grid>
<.grid place_content="between"></.grid>
<.grid place_content="around"></.grid>
<.grid place_content="evenly"></.grid>
<.grid place_content="stretch"></.grid>

Place items prop

Shorthand to control alignment of individual items along both axes.

<.grid place_items="start"></.grid>
<.grid place_items="end"></.grid>
<.grid place_items="center"></.grid>
<.grid place_items="stretch"></.grid>

Place self prop

Controls alignment of a single item inside the grid.

I am centered

I'm default

<.grid place_self="auto"></.grid>
<.grid place_self="start"></.grid>
<.grid place_self="end"></.grid>
<.grid place_self="center"></.grid>
<.grid place_self="stretch"></.grid>

Name	Type	Required	Description
id	string	No	A unique identifier for the root element of the component.
direction	string	No	Sets the flex direction of the container.
justify	string	No	Controls alignment of items along the main axis.
align	string	No	Controls alignment of items along the cross axis.
align_self	string	No	Controls alignment for a single item, overriding the container's align setting.
gap	string	No	Sets the space between child elements.
wrap	string	No	Controls wrapping behavior of flex items.
grow	string	No	Determines whether flex items grow to fill available space.
shrink	string	No	Determines whether flex items shrink if needed.
basis	string	No	Sets the initial main size of a flex item.
order	string	No	Controls the visual order of an item within a flex or grid container.
class	string	No	Additional CSS classes to apply to the container.
rest	global	No	Any valid global HTML attributes passed to the component (e.g. aria, data-*).

Name	Type	Required	Description
id	string	No	A unique identifier for the root element of the component.
cols	string	No	Defines the number of columns in the grid.
rows	string	No	Defines the number of rows in the grid.
auto_cols	string	No	Sets the size for implicitly created columns.
auto_rows	string	No	Sets the size for implicitly created rows.
auto_flow	string	No	Controls how auto-placed items are inserted into the grid.
justify_items	string	No	Controls how grid items are aligned along the row axis.
justify_self	string	No	Overrides alignment for a single grid item along the row axis.
gap	string	No	Sets the space between child elements.
align_content	string	No	Controls how multiple rows are aligned within the grid container.
place_content	string	No	Shorthand for setting both align-content and justify-content.
place_items	string	No	Shorthand to align items along both axes in the grid container.
place_self	string	No	Shorthand to align a single item along both axes.
order	string	No	Controls the visual order of an item within a flex or grid container.
class	string	No	Additional CSS classes to apply to the container.
rest	global	No	Any valid global HTML attributes passed to the component (e.g. aria, data-*).

Name	Type	Options	Recommended?
`--type`	string	flex - grid	Yes
`--only`	string	flex - grid	Yes
`--module`	string	Something	NO

Mishka

Overview of the Phoenix LiveView Layout Component

Flex Component

Grid Component

Direction prop

Justify prop

Align prop

Gap prop

Wrap prop

Grow prop

Shrink prop

Basis prop

Order prop

Align self prop

Grid cols prop

Rows prop

Auto cols prop

Auto rows prop

Auto flow prop

Justify items prop

Align content prop

Place content prop

Place items prop

Place self prop

Flex Component Props

Grid Component Props

Layout CLI Arguments