Layout

import Flex   from '$lib/components/Flex.svelte';
import Grid   from '$lib/components/Grid.svelte';
import HStack from '$lib/components/HStack.svelte';
import VStack from '$lib/components/VStack.svelte';
import Spacer from '$lib/components/Spacer.svelte';

<HStack gap={3}>
  <div>Alpha</div>
  <div>Beta</div>
  <div>Gamma</div>
</HStack>

<HStack gap={3}>
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</HStack>

<VStack gap={3}>
  <div>First</div>
  <div>Second</div>
  <div>Third</div>
</VStack>

<!-- row-reverse -->
<Flex direction="row-reverse" gap={3}>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</Flex>

<!-- column, right-aligned -->
<Flex direction="column" align="end" gap={2}>
  <div>Right aligned</div>
  <div>Items here</div>
</Flex>

<Grid cols={3} gap={3}>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</Grid>

<!-- Push items to opposite ends -->
<HStack gap={2}>
  <div>Logo</div>
  <Spacer />
  <div>Login</div>
  <div>Sign up</div>
</HStack>