From 6084acc977a37d695ef6a84182772fcfe2412076 Mon Sep 17 00:00:00 2001
From: Daniel Olabemiwo <44473671+D-Lite@users.noreply.github.com>
Date: Sun, 16 Jul 2023 11:11:38 +0100
Subject: [PATCH] Simplegrid component (#47)
* feat: simple grid component documentation
* refactor: change name casing simplegrid
* refactor: change name casing simplegrid
---
.../simplegrid/SimpleGridAutoResponsive.vue | 9 ++
.../examples/simplegrid/SimpleGridExample.vue | 9 ++
.../simplegrid/SimpleGridResponsive.vue | 9 ++
.../examples/simplegrid/SimpleGridSpacing.vue | 9 ++
content/4.components/simplegrid.md | 91 +++++++++++++++++++
5 files changed, 127 insertions(+)
create mode 100644 components/content/examples/simplegrid/SimpleGridAutoResponsive.vue
create mode 100644 components/content/examples/simplegrid/SimpleGridExample.vue
create mode 100644 components/content/examples/simplegrid/SimpleGridResponsive.vue
create mode 100644 components/content/examples/simplegrid/SimpleGridSpacing.vue
create mode 100644 content/4.components/simplegrid.md
diff --git a/components/content/examples/simplegrid/SimpleGridAutoResponsive.vue b/components/content/examples/simplegrid/SimpleGridAutoResponsive.vue
new file mode 100644
index 0000000..f11cf32
--- /dev/null
+++ b/components/content/examples/simplegrid/SimpleGridAutoResponsive.vue
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/components/content/examples/simplegrid/SimpleGridExample.vue b/components/content/examples/simplegrid/SimpleGridExample.vue
new file mode 100644
index 0000000..9e804d4
--- /dev/null
+++ b/components/content/examples/simplegrid/SimpleGridExample.vue
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/components/content/examples/simplegrid/SimpleGridResponsive.vue b/components/content/examples/simplegrid/SimpleGridResponsive.vue
new file mode 100644
index 0000000..a4ec08a
--- /dev/null
+++ b/components/content/examples/simplegrid/SimpleGridResponsive.vue
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/components/content/examples/simplegrid/SimpleGridSpacing.vue b/components/content/examples/simplegrid/SimpleGridSpacing.vue
new file mode 100644
index 0000000..f0c1e17
--- /dev/null
+++ b/components/content/examples/simplegrid/SimpleGridSpacing.vue
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/content/4.components/simplegrid.md b/content/4.components/simplegrid.md
new file mode 100644
index 0000000..3a9f65d
--- /dev/null
+++ b/content/4.components/simplegrid.md
@@ -0,0 +1,91 @@
+---
+title: SimpleGrid
+description: SimpleGrid component
+version: 2.0+
+---
+
+# SimpleGrid
+
+
+SimpleGrid is a user-friendly tool for effortlessly creating responsive grid layouts, utilizing a div element with display: grid.
+
+## Import
+
+```js
+import { CSimpleGrid } from '@chakra-ui/vue-next';
+```
+
+## Usage
+
+Specifying the number of columns for the grid layout.
+
+### Sample Tag :
+
+::showcase
+::simple-grid-example{width=full}
+::
+::
+
+```html
+
+
+
+
+
+
+
+```
+
+You can also make it responsive by passing array or object values into the `columns` prop.
+
+::showcase
+::simple-grid-responsive{width=full}
+::
+::
+
+```html
+
+
+
+
+
+
+
+```
+
+### Auto-responsive grid#
+
+To make the grid responsive adjust automatically without passing `columns`, simply pass the `min-child-width` prop to specify the `min-width` a child should have before adjusting the layout.
+
+This uses css grid `auto-fit` and `minmax()` internally.
+
+### Changing the spacing for columns and rows
+
+Simply pass the `spacing` prop to change the row and column spacing between the grid items. `SimpleGrid` also allows you pass `spacing-x` and `spacing-y` to define the space between columns and rows respectively.
+
+::showcase
+::simple-grid-spacing{width=full}
+::
+::
+
+```html
+
+
+
+
+
+
+
+```
+
+## Props
+
+SimpleGrid composes `Box` so you can pass all the `Box` props and CSS grid props with the addition of these:
+
+| Name | Type | Description |
+|------------------|-----------------------------|---------------------------------------------------------------------------------------------------------------------------------------|
+| `columns` | `number` | The number of columns |
+| `spacing` | `GridProps["gridGap"]` | The gap between the grid items |
+| `spacingX` | `GridProps["gridGap"]` | The `column` gap between the grid items |
+| `spacingY` | `GridProps["gridGap"]` | The `row` gap between the grid items |
+| `minChildWidth` | `CSSProperties["minWidth"]` | The width at which child elements will break into columns. Pass a number for pixel values or a string for any other valid CSS length. |
\ No newline at end of file