diff --git a/src/_docs/grid.md b/src/_docs/grid.md index 9d577a9f5..08ada9122 100644 --- a/src/_docs/grid.md +++ b/src/_docs/grid.md @@ -2,4 +2,75 @@ title: Grid utilities icon: fe fe-grid in_progress: true ---- \ No newline at end of file +description: Quickly and easily create layouts with the basic 12-column. +--- + +### Basic layout + +Create basic grid layout using columns. With `.row` and `.col`, we can easily manipulate the layout. + +{% example html %} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endexample %} + +### Column spacing + +Row provides `.gutters-[size]` attribute to specify spacings between columns. + +{% example html %} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endexample %} \ No newline at end of file diff --git a/src/_includes/aside.html b/src/_includes/aside.html index db74c326e..b64a3dffd 100644 --- a/src/_includes/aside.html +++ b/src/_includes/aside.html @@ -16,7 +16,7 @@ {% include chat-content.html %}
-
+
diff --git a/src/_includes/cards/chat.html b/src/_includes/cards/chat.html index f9d518765..2ffa49ef0 100644 --- a/src/_includes/cards/chat.html +++ b/src/_includes/cards/chat.html @@ -6,7 +6,7 @@ {% include chat-content.html %}
-
+
diff --git a/src/_includes/cards/company-lookup.html b/src/_includes/cards/company-lookup.html index bdab64cc6..79fe7296e 100644 --- a/src/_includes/cards/company-lookup.html +++ b/src/_includes/cards/company-lookup.html @@ -41,7 +41,7 @@
-
+
diff --git a/src/_includes/cards/credit-card.html b/src/_includes/cards/credit-card.html index 3b6e8abb4..634ae9962 100644 --- a/src/_includes/cards/credit-card.html +++ b/src/_includes/cards/credit-card.html @@ -10,10 +10,10 @@
-
+
-
+
@@ -77,7 +77,7 @@
-
+
@@ -318,7 +318,7 @@
-
+