From 977ab96aa9a9a5302be523f3166e6302ca445134 Mon Sep 17 00:00:00 2001 From: Maitra Khatri Date: Wed, 9 Feb 2022 17:40:05 +0530 Subject: [PATCH] feat: Simplified Grid DONE --- CSS/Components/simplified-grid/index.html | 34 ++++++++++++++++ .../simplified-grid/simplified-grid.css | 13 +++++++ CSS/style.css | 1 + docs/components.html | 39 +++++++++++++++++-- docs/docs.css | 12 ++++++ 5 files changed, 96 insertions(+), 3 deletions(-) create mode 100644 CSS/Components/simplified-grid/index.html create mode 100644 CSS/Components/simplified-grid/simplified-grid.css diff --git a/CSS/Components/simplified-grid/index.html b/CSS/Components/simplified-grid/index.html new file mode 100644 index 0000000..dde574d --- /dev/null +++ b/CSS/Components/simplified-grid/index.html @@ -0,0 +1,34 @@ + + + + + + + simplified grid + + + + + +
+
item1
+
item2
+
+ +
+
item1
+
item2
+
item3
+
+ + + \ No newline at end of file diff --git a/CSS/Components/simplified-grid/simplified-grid.css b/CSS/Components/simplified-grid/simplified-grid.css new file mode 100644 index 0000000..9a888f6 --- /dev/null +++ b/CSS/Components/simplified-grid/simplified-grid.css @@ -0,0 +1,13 @@ +@import url(../../style.css); + +.grid-container { + display: grid; +} + +.grid-col-2 { + grid-template-columns: repeat(2, 1fr); +} + +.grid-col-3 { + grid-template-columns: repeat(3, 1fr); +} \ No newline at end of file diff --git a/CSS/style.css b/CSS/style.css index 35b27a5..2754508 100644 --- a/CSS/style.css +++ b/CSS/style.css @@ -14,6 +14,7 @@ @import url(./Components/input/input.css); @import url(./Components/text-utilities/text-utilities.css); @import url(./Components/navigation/navigation.css); +@import url(./Components/simplified-grid/simplified-grid.css); /* FONT */ @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap'); diff --git a/docs/components.html b/docs/components.html index 6217fd1..0f4b7ee 100644 --- a/docs/components.html +++ b/docs/components.html @@ -9,6 +9,7 @@ gozo UI | Components + @@ -823,7 +824,7 @@

Classic Navbar

- +
+ +

Simplified Grid

+

Grid 2

+

Grid with 2 items and 2 columns

+ +
+
+
item1
+
item2
+
+
+ +
+ +
+ +

Grid 3

+

Grid with 3 items and 3 columns

+ +
+
+
item1
+
item2
+
item3
+
+
+ +
+ +
+
+ - \ No newline at end of file diff --git a/docs/docs.css b/docs/docs.css index d68f838..72d7d44 100644 --- a/docs/docs.css +++ b/docs/docs.css @@ -231,4 +231,16 @@ button#bfc-show { .navbar-container { width:auto; +} + +.grid-item { + padding: 1rem 2rem; + text-align: center; + background-color: #333333; + color: white; + margin: 1rem; +} + +.grid-show-container { + width: auto; } \ No newline at end of file