# 布局示例

<template>
  <Grid height="300px" columns="auto 200px">
    <GridItem place-items="center">
      <Button>Button</Button>
    </GridItem>

    <GridItem padding="10px">
      <Button>Button</Button>
    </GridItem>
  </Grid>
</template>

<script>
import { defineComponent } from 'vue'
import { Grid, GridItem, Button } from 'comz'

export default defineComponent({
  components: {
    Grid,
    GridItem,
    Button
  }
})
</script>

<style scoped>
.cgrid-item {
  background-color: rgba(0, 0, 0, 0.2);
  outline: 1px white solid;
}
</style>

<template>
  <Grid
    height="400px"
    rows="repeat(3, 100px)"
    columns="repeat(3, 100px)"
    place-content="center"
    gap="10px"
  >
    <GridItem place-items="flex-end">
      <Button>Button</Button>
    </GridItem>

    <GridItem place-items="flex-end center">
      <Button>Button</Button>
    </GridItem>

    <GridItem place-items="flex-end flex-start">
      <Button>Button</Button>
    </GridItem>

    <GridItem place-items="center flex-end">
      <Button>Button</Button>
    </GridItem>

    <GridItem place-items="center">
      <Button>Button</Button>
    </GridItem>

    <GridItem place-items="center flex-start">
      <Button>Button</Button>
    </GridItem>

    <GridItem place-items="flex-start flex-end">
      <Button>Button</Button>
    </GridItem>

    <GridItem place-items="flex-start center">
      <Button>Button</Button>
    </GridItem>

    <GridItem place-items="flex-start">
      <Button>Button</Button>
    </GridItem>
  </Grid>
</template>

<script>
import { defineComponent } from 'vue'
import { Grid, GridItem, Button } from 'comz'

export default defineComponent({
  components: {
    Grid,
    GridItem,
    Button
  }
})
</script>

<style scoped>
.cgrid-item {
  background-color: rgba(0, 0, 0, 0.2);
}
</style>

<template>
  <Flex flow="column" gap="16px">
    <Grid width="100%" columns="repeat(12, 8.33%)">
      <template v-for="i in 12" :key="i">
        <GridItem place-items="center">{{ i }}</GridItem>
      </template>
    </Grid>

    <Grid width="100%" columns="repeat(12, 8.33%)">
      <template v-for="i in 6" :key="i">
        <GridItem place-items="center" area="1 / span 2">{{ i }}</GridItem>
      </template>
    </Grid>

    <Grid width="100%" columns="repeat(12, 8.33%)">
      <template v-for="i in 4" :key="i">
        <GridItem place-items="center" area="1 / span 3">{{ i }}</GridItem>
      </template>
    </Grid>

    <Grid width="100%" columns="repeat(12, 8.33%)">
      <template v-for="i in 2" :key="i">
        <GridItem place-items="center" area="1 / span 6">{{ i }}</GridItem>
      </template>
    </Grid>

    <Grid width="100%" columns="repeat(12, 8.33%)">
      <GridItem place-items="center" area="1 / 5 / -1 / span 2"
        >offset 4 span 2</GridItem
      >
      <GridItem place-items="center" area="1 / -4 / -1 / span 3"
        >offset 9 span 3</GridItem
      >
    </Grid>
  </Flex>
</template>

<script>
import { defineComponent } from 'vue'
import { Grid, GridItem, Flex, Button } from 'comz'

export default defineComponent({
  components: {
    Grid,
    GridItem,
    Flex,
    Button
  }
})
</script>

<style scoped>
.cgrid-item {
  background-color: rgba(0, 0, 0, 0.2);
  outline: 1px white solid;
  font-size: 14px;
}
</style>

<template>
  <Flex gap="32px" wrap>
    <Flex>
      <Button>button</Button>
      <Button>button</Button>
      <Button>button</Button>
    </Flex>

    <Flex>
      <Button>button</Button>
      <Button>button</Button>
      <Button>button</Button>
    </Flex>

    <Flex>
      <Button>button</Button>
      <Button>button</Button>
      <Button>button</Button>
    </Flex>
  </Flex>
</template>

<script>
import { defineComponent } from 'vue'
import { Flex, Button } from 'comz'

export default defineComponent({
  components: {
    Flex,
    Button
  }
})
</script>