Grid

Grid is used to organize and display data.

Basic Grid

col-24

col-12

col-8

col-6

svelte

<script lang="ts">
	import { Row, Col } from 'stwui';
</script>

<Row>
	<Col class="col-24">
		col-24
	</Col>
</Row>
<Row>
	<Col class="col-12">
		col-12
	</Col>
	<Col class="col-12">
		col-12
	</Col>
</Row>

<Row>
	<Col class="col-8">
		col-8
	</Col>
	<Col class="col-8">
		col-8
	</Col>
	<Col class="col-8">
		col-8
	</Col>
</Row>

<Row>
	<Col class="col-6">
		col-6
	</Col>
	<Col class="col-6">
		col-6
	</Col>
	<Col class="col-6">
		col-6
	</Col>
	<Col class="col-6">
		col-6
	</Col>
</Row>

With Gutter

Horizontal

col-6

Vertical

col-6

Horizontal & Vertical

col-6

svelte

<script lang="ts">
	import { Row, Col } from 'stwui';
</script>

<Divider position="left">
	<Divider.Label slot="label">Horizontal</Divider.Label>
</Divider>

<Row gutter={['0', '4']}>
	<Col class="col-6">
		col-6
	</Col>
	<Col class="col-6">
		col-6
	</Col>
	<Col class="col-6">
		col-6
	</Col>
	<Col class="col-6">
		col-6
	</Col>

	<Col class="col-6">
		col-6
	</Col>
	<Col class="col-6">
		col-6
	</Col>
	<Col class="col-6">
		col-6
	</Col>
	<Col class="col-6">
		col-6
	</Col>
</Row>

<Divider position="left">
	<Divider.Label slot="label">Vertical</Divider.Label>
</Divider>

<Row gutter={['4', '0']}>
	<Col class="col-6">
		col-6
	</Col>
	<Col class="col-6">
		col-6
	</Col>
	<Col class="col-6">
		col-6
	</Col>
	<Col class="col-6">
		col-6
	</Col>

	<Col class="col-6">
		col-6
	</Col>
	<Col class="col-6">
		col-6
	</Col>
	<Col class="col-6">
		col-6
	</Col>
	<Col class="col-6">
		col-6
	</Col>
</Row>

<Divider position="left">
	<Divider.Label slot="label">Horizontal & Vertical</Divider.Label>
</Divider>

<Row gutter="4">
	<Col class="col-6">
		col-6
	</Col>
	<Col class="col-6">
		col-6
	</Col>
	<Col class="col-6">
		col-6
	</Col>
	<Col class="col-6">
		col-6
	</Col>

	<Col class="col-6">
		col-6
	</Col>
	<Col class="col-6">
		col-6
	</Col>
	<Col class="col-6">
		col-6
	</Col>
	<Col class="col-6">
		col-6
	</Col>
</Row>

Justify

Start

col-4

Center

col-4

End

col-4

Between

col-4

Around

col-4

svelte

<script lang="ts">
	import { Row, Col } from 'stwui';
</script>

<Divider position="left">
	<Divider.Label slot="label">Start</Divider.Label>
</Divider>

<Row justify="start">
	<Col class="col-4">
		col-4
	</Col>
	<Col class="col-4">
		col-4
	</Col>
	<Col class="col-4">
		col-4
	</Col>
	<Col class="col-4">
		col-4
	</Col>
</Row>

<Divider position="left">
	<Divider.Label slot="label">Center</Divider.Label>
</Divider>

<Row justify="center">
	<Col class="col-4">
		col-4
	</Col>
	<Col class="col-4">
		col-4
	</Col>
	<Col class="col-4">
		col-4
	</Col>
	<Col class="col-4">
		col-4
	</Col>
</Row>

<Divider position="left">
	<Divider.Label slot="label">End</Divider.Label>
</Divider>

<Row justify="end">
	<Col class="col-4">
		col-4
	</Col>
	<Col class="col-4">
		col-4
	</Col>
	<Col class="col-4">
		col-4
	</Col>
	<Col class="col-4">
		col-4
	</Col>
</Row>

<Divider position="left">
	<Divider.Label slot="label">Between</Divider.Label>
</Divider>

<Row justify="between" class="bg-light-background dark:bg-dark-background p-2">
	<Col class="col-4">
		col-4
	</Col>
	<Col class="col-4">
		col-4
	</Col>
	<Col class="col-4">
		col-4
	</Col>
	<Col class="col-4">
		col-4
	</Col>
</Row>

<Divider position="left">
	<Divider.Label slot="label">Around</Divider.Label>
</Divider>

<Row justify="around">
	<Col class="col-4">
		col-4
	</Col>
	<Col class="col-4">
		col-4
	</Col>
	<Col class="col-4">
		col-4
	</Col>
	<Col class="col-4">
		col-4
	</Col>
</Row>

Align

Start

col-4

Center

col-4

End

col-4

svelte

<script lang="ts">
	import { Row, Col } from 'stwui';
</script>

<Divider position="left">
	<Divider.Label slot="label">Start</Divider.Label>
</Divider>

<Row align="start" justify="center">
	<Col class="col-4" style="height: 5rem;">
		col-4
	</Col>
	<Col class="col-4">
		col-4
	</Col>
	<Col class="col-4" style="height: 5rem;">
		col-4
	</Col>
	<Col class="col-4">
		col-4
	</Col>
</Row>

<Divider position="left">
	<Divider.Label slot="label">Center</Divider.Label>
</Divider>

<Row align="center" justify="between">
	<Col class="col-4" style="height: 5rem;">
		col-4
	</Col>
	<Col class="col-4">
		col-4
	</Col>
	<Col class="col-4" style="height: 5rem;">
		col-4
	</Col>
	<Col class="col-4">
		col-4
	</Col>
</Row>

<Divider position="left">
	<Divider.Label slot="label">End</Divider.Label>
</Divider>

<Row align="end" justify="center">
	<Col class="col-4" style="height: 5rem;">
		col-4
	</Col>
	<Col class="col-4">
		col-4
	</Col>
	<Col class="col-4" style="height: 5rem;">
		col-4
	</Col>
	<Col class="col-4">
		col-4
	</Col>
</Row>

Row Slots

default

Row Props

gutter	TwSizes \| [TwSizes, TwSizes]	0
justify	'start' \| 'center' \| 'end' \| 'between' \| 'around' \| undefined	start
align	'start' \| 'center' \| 'end'	start

Col Slots

default