Place Items

Shorthand for align-items and justify-items

Syntax

layout="place-items:[value]"

Values

Value	CSS Output	Description
start	place-items: start	Start alignment
end	place-items: end	End alignment
center	place-items: center	Center alignment
stretch	place-items: stretch	Stretch items

Examples

<div layout="grid place-items:center">Centered items</div>

Preview

Place Items Center

layout="place-items:center" - Center all items within their grid cells

123

View Code

<div layout="grid grid-cols:3 place-items:center" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
  <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
  <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
  <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
</div>