Labs projects are experimental packages available for early feedback.

Responsive Layout - Container

By optionally importing the responsive container layout module, you extend the nve-layout system using CSS Container Queries for adaptive responsive design based on the container element's width rather than just the browser width.

Learn more about container queries in this Google web.dev video and article.

The responsive layout API applies conditional styling based on parent element width. Supported features include gap, padding, row vs column, reversing flex direction, and varying grid structure across defined pixel width breakpoints.

The following set of container breakpoint-values defines:

xs = 160px
sm = 320px
md = 480px
lg = 640px
xl = 800px
xxl = 960px

The ampersand-based &breakpoint-size|... API adds the breakpoint size before the layout modifier.

Conditional gap sizing example: nve-layout="row &sm|gap:xxxs &md|gap:md &lg|gap:xxl". The size value after the : corresponds to one of the nine spacing/padding system values.

The extra div wrapper explicitly defines the container element for queries. This design keeps the utility minimal—elements with & syntax automatically use their parent as the container without requiring manual container specification.

Responsive Gap Sizing

The following container query breakpoints are available for gap, replace ... with one of the 9 gap spacing values:

&xs|gap:...
&sm|gap:...
&md|gap:...
&lg|gap:...
&xl|gap:...
&xxl|gap:...

Responsive Padding

The following container query breakpoints are available for padding, replace ... with one of the 9 padding values:

&xs|pad:...
&sm|pad:...
&md|pad:...
&lg|pad:...
&xl|pad:...
&xxl|pad:...

Breakpoints for Switching Flexbox Layout Direction

The following container query breakpoints are available for swapping flex direction:

Horizontally

&xs|row
&sm|row
&md|row
&lg|row
&xl|row
&xxl|row

Vertically

&xs|column
&sm|column
&md|column
&lg|column
&xl|column
&xxl|column

Reverse Direction

Also, you can use the following syntax for flipping the flex direction:

&...|row-reverse
&...|column-reverse

Responsive Grid

You can vary grid structure based on container size using the following syntax with nve-layout=grid...:

Or:

Responsive Grid Parent

Responsive Grid Items

Hiding Elements Based on Container Size

Since hiding elements only affects the display of the element itself and not the layout of its children, responsive visibility control uses the nve-display attribute.

Element visibility (hiding) uses the separate nve-display attribute rather than nve-layout. This distinction exists because visibility control only affects the element itself, while layout properties affect how the parent arranges children.

The following attributes are available for hiding elements at specific container breakpoints and below:

nve-display="hide"
nve-display="&xs|hide"
nve-display="&sm|hide"
nve-display="&md|hide"
nve-display="&lg|hide"
nve-display="&xl|hide"
nve-display="&xxl|hide"

You may want to now show elements at smaller container widths. The following attributes are available for showing elements at specific container breakpoints and below:

nve-display="&xs|show"
nve-display="&sm|show"
nve-display="&md|show"
nve-display="&lg|show"
nve-display="&xl|show"
nve-display="&xxl|show"

Summary

The container query responsive system allows elements to adapt based on their container's width using the & prefix. Remember:

Layout properties (gap, padding, row/column, grid) use nve-layout
Visibility control (hide/show) uses nve-display
Container queries use the parent element to establish the container context
Breakpoints range from xs (160px) to xxl (960px)

Example combining both: