Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit 18054d6

Browse files
Merge pull request #437 from IHIutch/fix/grid-item-docs
fix: grid item example
2 parents 00343a3 + 30b08d1 commit 18054d6

File tree

1 file changed

+10
-4
lines changed

1 file changed

+10
-4
lines changed

website/pages/grid.mdx

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,14 @@ time.
5555
In some layouts, you may need certain grid items to span specific amount of columns or rows instead of an even distribution. To achieve this, you need to pass the `colSpan` prop to the `CGridItem` component to span across columns and also pass the `rowSpan` component to span across rows. You also need to specify the `templateColumns` and `templateRows`.
5656

5757
```vue live=true
58-
<c-grid w="600px" template-columns="repeat(5, 1fr)" gap="6">
59-
<c-grid-item row-span="2" col-span="1" bg="blue.300"" />
58+
<c-grid
59+
h="200px"
60+
w="600px"
61+
template-rows="repeat(2, 1fr)"
62+
template-columns="repeat(5, 1fr)"
63+
gap="6"
64+
>
65+
<c-grid-item row-span="2" col-span="1" bg="blue.300" />
6066
<c-grid-item col-span="2" bg="red.300" />
6167
<c-grid-item col-span="2" bg="red.300" />
6268
<c-grid-item col-span="4" bg="blue.300" />
@@ -69,8 +75,8 @@ Pass the `colStart` and `colEnd` prop to `CGridItem` component to make an elemen
6975

7076
```vue live=true
7177
<c-grid w="600px" template-columns="repeat(5, 1fr)" gap="6">
72-
<c-grid-item col-span="2" h="10" bg="blue.500" />
73-
<c-grid-item col-start="4" col-end="6" h="10" bg="red.500" />
78+
<c-grid-item col-span="2" h="10" bg="blue.300" />
79+
<c-grid-item col-start="4" col-end="6" h="10" bg="red.300" />
7480
</c-grid>
7581
```
7682

0 commit comments

Comments
 (0)