Grid
Grid is used to organize and display data.
<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>
<Row>
<Col class="w-[20%]">
<div class={lightBlockWithSpacing}>w-[20%]</div>
</Col>
<Col class="w-[20%]">
<div class={darkBlockWithSpacing}>w-[20%]</div>
</Col>
<Col class="w-[20%]">
<div class={lightBlockWithSpacing}>w-[20%]</div>
</Col>
<Col class="w-[20%]">
<div class={darkBlockWithSpacing}>w-[20%]</div>
</Col>
<Col class="w-[20%]">
<div class={lightBlockWithSpacing}>w-[20%]</div>
</Col>
</Row>
With Breakpoints
<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>
<Row>
<Col class="w-[20%]">
<div class={lightBlockWithSpacing}>w-[20%]</div>
</Col>
<Col class="w-[20%]">
<div class={darkBlockWithSpacing}>w-[20%]</div>
</Col>
<Col class="w-[20%]">
<div class={lightBlockWithSpacing}>w-[20%]</div>
</Col>
<Col class="w-[20%]">
<div class={darkBlockWithSpacing}>w-[20%]</div>
</Col>
<Col class="w-[20%]">
<div class={lightBlockWithSpacing}>w-[20%]</div>
</Col>
</Row>
<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>
With Justify
<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-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>
<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 Props
| gutter | TwSizes | [TwSizes, TwSizes] | 0 |
| justify | 'start' | 'center' | 'end' | 'between' | 'around' | undefined | start |
| align | 'start' | 'center' | 'end' | start |
Row/Col Class Identifiers
