[ @sdxc/u/layout ]

align-content

Sets align-content, using the same accepted keywords and between/around/evenly aliasing as u.justify().

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { content } from "@sdxc/u/layout";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.content("between")`	`css({ alignContent: "space-between" })`

Examples

Basic example

Use content("center") to gather a grid's or a wrapping flex container's rows in the middle of its block axis:

<div
	mix={[
		grid(),
		gridTemplate({ columns: repeat(3, 1) }),
		content("center"),
		gap(4),
		bs(64),
		...,
	]}
>
	<div mix={[...]}>01</div>
	<div mix={[...]}>02</div>
	<div mix={[...]}>03</div>
	<div mix={[...]}>04</div>
	<div mix={[...]}>05</div>
</div>

Start

Use content("start") to pack the rows against the start of the container's block axis:

<div
	mix={[
		grid(),
		gridTemplate({ columns: repeat(3, 1) }),
		content("start"),
		gap(4),
		bs(64),
		...,
	]}
>
	<div mix={[...]}>01</div>
	<div mix={[...]}>02</div>
	<div mix={[...]}>03</div>
	<div mix={[...]}>04</div>
	<div mix={[...]}>05</div>
</div>

End

Use content("end") to pack the rows against the end of the container's block axis:

<div
	mix={[
		grid(),
		gridTemplate({ columns: repeat(3, 1) }),
		content("end"),
		gap(4),
		bs(64),
		...,
	]}
>
	<div mix={[...]}>01</div>
	<div mix={[...]}>02</div>
	<div mix={[...]}>03</div>
	<div mix={[...]}>04</div>
	<div mix={[...]}>05</div>
</div>

Space between

Use content("between") to push the first and last rows to the edges and share the free space between the rows:

<div
	mix={[
		grid(),
		gridTemplate({ columns: repeat(3, 1) }),
		content("between"),
		gap(4),
		bs(64),
		...,
	]}
>
	<div mix={[...]}>01</div>
	<div mix={[...]}>02</div>
	<div mix={[...]}>03</div>
	<div mix={[...]}>04</div>
	<div mix={[...]}>05</div>
</div>

Space around

Use content("around") to give each row an equal share of free space on both sides:

<div
	mix={[
		grid(),
		gridTemplate({ columns: repeat(3, 1) }),
		content("around"),
		gap(4),
		bs(64),
		...,
	]}
>
	<div mix={[...]}>01</div>
	<div mix={[...]}>02</div>
	<div mix={[...]}>03</div>
	<div mix={[...]}>04</div>
	<div mix={[...]}>05</div>
</div>

Space evenly

Use content("evenly") to make every gap, the ones at the edges included, the same size:

<div
	mix={[
		grid(),
		gridTemplate({ columns: repeat(3, 1) }),
		content("evenly"),
		gap(4),
		bs(64),
		...,
	]}
>
	<div mix={[...]}>01</div>
	<div mix={[...]}>02</div>
	<div mix={[...]}>03</div>
	<div mix={[...]}>04</div>
	<div mix={[...]}>05</div>
</div>

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.content("between"))

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.content("between"))

Signature

u.content(value?: JustifyValue)