Place Content

Shorthand for align-content and justify-content

Syntax

layout="place-content:[value]"

Values

Value	CSS Output	Description
start	place-content: start	Start alignment
end	place-content: end	End alignment
center	place-content: center	Center alignment
between	place-content: space-between	Space between
around	place-content: space-around	Space around
evenly	place-content: space-evenly	Even spacing
stretch	place-content: stretch	Stretch content

Examples

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

Preview

Place Content Center

layout="place-content:center" - Center entire grid content in both directions

12

View Code

<div layout="grid grid-cols:2 place-content:center" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 120px;">
  <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>
</div>