From 14a41e3a4c1636974c3b72f3f4f42c5690d6b471 Mon Sep 17 00:00:00 2001 From: jscodelover Date: Sat, 29 Jun 2019 18:51:58 +0530 Subject: [PATCH 1/7] feat(cssgrid): grid fundamental --- cssGrids/01/index.html | 20 ---------------- cssGrids/01/style.css | 43 ---------------------------------- cssGrids/grid-fundamental.html | 32 +++++++++++++++++++++++++ cssGrids/style.css | 20 ++++++++++++++++ 4 files changed, 52 insertions(+), 63 deletions(-) delete mode 100755 cssGrids/01/index.html delete mode 100755 cssGrids/01/style.css create mode 100644 cssGrids/grid-fundamental.html create mode 100644 cssGrids/style.css diff --git a/cssGrids/01/index.html b/cssGrids/01/index.html deleted file mode 100755 index 5f64690..0000000 --- a/cssGrids/01/index.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - CSS Grids - - - - -
-
-
I am Header
- -
I am Right
-
I am Right
-
I am footer
- -
- - - \ No newline at end of file diff --git a/cssGrids/01/style.css b/cssGrids/01/style.css deleted file mode 100755 index bb5a96a..0000000 --- a/cssGrids/01/style.css +++ /dev/null @@ -1,43 +0,0 @@ -* { - padding: 0; - margin: 0; -} - -.grid { - display: grid; - grid-template-columns: 200px 2fr 1fr; - border: 1px solid red; - grid-gap: 20px; - grid-auto-rows: 200px; -} - -.section { - width: 60%; - margin: 0 auto; - background: #eee; -} - -header { - grid-column: 1/4; - background: red; -} - -aside { - grid-column: 1; - background: blue; -} - -article { - grid-column: 2; - background: orange; -} - -.test { - grid-column: 3; - background: yellow; -} - -footer { - grid-column: 1 / 4; - background: green; -} \ No newline at end of file diff --git a/cssGrids/grid-fundamental.html b/cssGrids/grid-fundamental.html new file mode 100644 index 0000000..06eaa53 --- /dev/null +++ b/cssGrids/grid-fundamental.html @@ -0,0 +1,32 @@ + + + + + + + + Grid Fundamental + + + +
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
+ + diff --git a/cssGrids/style.css b/cssGrids/style.css new file mode 100644 index 0000000..239bd7f --- /dev/null +++ b/cssGrids/style.css @@ -0,0 +1,20 @@ +*, +*::before, +*::after{ + box-sizing: border-box; +} + +body{ + background-color: #3d889a; +} + +.item { + /* We center the contents of these items. You can also do this with flexbox too! */ + display: grid; + justify-content: center; + align-items: center; + border: 5px solid rgba(0, 0, 0, 0.03); + border-radius: 3px; + font-size: 35px; + background-color: #ffc600; +} \ No newline at end of file From fe2b075a4f34af7674fa02a7bd03d7dc44a1543e Mon Sep 17 00:00:00 2001 From: jscodelover Date: Sat, 29 Jun 2019 18:55:38 +0530 Subject: [PATCH 2/7] feat(cssgrid): grid item placing --- cssGrids/grid-placing-items.html | 69 ++++++++++++++++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 cssGrids/grid-placing-items.html diff --git a/cssGrids/grid-placing-items.html b/cssGrids/grid-placing-items.html new file mode 100644 index 0000000..0ed8cdd --- /dev/null +++ b/cssGrids/grid-placing-items.html @@ -0,0 +1,69 @@ + + + + + + + + Grid Placing Item + + + +
+

+ grid-column is shorthand for grid-column-start and grid-column-end. They are used to span the + element according to lines. We can use -1 for going to the end and -2 , -3 so on for second last and third last line. +

+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+
22
+
23
+
24
+
25
+
26
+
27
+
28
+
29
+
30
+
+ + \ No newline at end of file From 389ac8e1df213bb9930542f4cb3c0297679d0f5c Mon Sep 17 00:00:00 2001 From: jscodelover Date: Sat, 29 Jun 2019 18:58:16 +0530 Subject: [PATCH 3/7] feat(cssgrid): grid-sizing-items --- cssGrids/grid-sizing-items.html | 64 +++++++++++++++++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 cssGrids/grid-sizing-items.html diff --git a/cssGrids/grid-sizing-items.html b/cssGrids/grid-sizing-items.html new file mode 100644 index 0000000..76a9616 --- /dev/null +++ b/cssGrids/grid-sizing-items.html @@ -0,0 +1,64 @@ + + + + + + + + Grid Sizing Item + + + +
+

If we want an item to take multiple spots inside our grid we can use spanning, can implement with property grid-column and grid-row.

+

It will affect the item only not entire row or column.

+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+
22
+
23
+
24
+
25
+
26
+
27
+
28
+
29
+
30
+
+ + \ No newline at end of file From 918c86f0f80264c13359e9fb26e2d32a03cba325 Mon Sep 17 00:00:00 2001 From: jscodelover Date: Sat, 29 Jun 2019 18:59:58 +0530 Subject: [PATCH 4/7] feat(cssgrid): grid-template-areas --- cssGrids/grid-template-areas.html | 103 ++++++++++++++++++++++++++++++ 1 file changed, 103 insertions(+) create mode 100644 cssGrids/grid-template-areas.html diff --git a/cssGrids/grid-template-areas.html b/cssGrids/grid-template-areas.html new file mode 100644 index 0000000..013317c --- /dev/null +++ b/cssGrids/grid-template-areas.html @@ -0,0 +1,103 @@ + + + + + + + + Grid Template Area + + + +
+

+ grid-template-areas = This property defines named grid areas and provides a visualisation of the grid structure, which may help make + underlying code easier to understand. +

+
+
+
#1 SideBar
+
+

Lorem ipsum dolor sit amet consectetur adipisicing.

+

Lorem, ipsum dolor.

+
+
#2 Sidebar
+
This is Footer
+
+
+

Setting the line track using grid-area.

+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+
22
+
23
+
24
+
25
+
26
+
27
+
28
+
29
+
30
+
+ + \ No newline at end of file From 71b31b6790b6d04565929f5ffae7f9be052043bd Mon Sep 17 00:00:00 2001 From: jscodelover Date: Sat, 29 Jun 2019 19:12:21 +0530 Subject: [PATCH 5/7] feat(cssgrid): name grid line --- cssGrids/grid-line-name.html | 42 ++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 cssGrids/grid-line-name.html diff --git a/cssGrids/grid-line-name.html b/cssGrids/grid-line-name.html new file mode 100644 index 0000000..e3af190 --- /dev/null +++ b/cssGrids/grid-line-name.html @@ -0,0 +1,42 @@ + + + + + + + + Name Lines in CSS Grid + + + +
+

+ We can name the grid line by specifying the name in square brackets eg [name] in grid-template-columns + and grid-template-rows +

+

We can have multiple name for a line eg- [name name].

+
+
+
1
+
2
+
3
+
4
+
+ + \ No newline at end of file From 578882fb00b806360864d19b22396cc4ce0de9d6 Mon Sep 17 00:00:00 2001 From: jscodelover Date: Sat, 29 Jun 2019 19:36:11 +0530 Subject: [PATCH 6/7] feat(cssgrid): explicit and implicit track --- cssGrids/grid-implicit-and-explicit.html | 70 ++++++++++++++++++++++++ 1 file changed, 70 insertions(+) create mode 100644 cssGrids/grid-implicit-and-explicit.html diff --git a/cssGrids/grid-implicit-and-explicit.html b/cssGrids/grid-implicit-and-explicit.html new file mode 100644 index 0000000..2b5d111 --- /dev/null +++ b/cssGrids/grid-implicit-and-explicit.html @@ -0,0 +1,70 @@ + + + + + + + + Implicit and Explicit Tracks + + + +
+

Implicit means that they are created automatically. Explicit means the row and column we have defined.

+

In grid we have grid-auto-flow: row as default which means new element will move to the row by default. But we can + move auto flow to column using grid-auto-flow: column;

+
+

grid-auto-rows and grid-auto-columns specifies the size of an implicitly-created grid row and column track.

+
+

with grid-auto-flow set to row we can set the value of implicitly created row.

+ 
+            grid-auto-flow: row
+            grid-auto-rows: 100px
+
+

with grid-auto-flow set to column we can set the value of implicitly created column.

+ 
+            grid-auto-flow: column
+            grid-auto-columns: 100px
+
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
+
+
1
+
2
+
3
+
4
+
5
+
+ + + + \ No newline at end of file From 3235736f6e0ebf5362738732009ba59032ef1b51 Mon Sep 17 00:00:00 2001 From: jscodelover Date: Sat, 29 Jun 2019 19:38:26 +0530 Subject: [PATCH 7/7] feat(cssgrid): alignment and centering --- cssGrids/grid-alignment-&-centering.html | 99 ++++++++++++++++++++++++ 1 file changed, 99 insertions(+) create mode 100644 cssGrids/grid-alignment-&-centering.html diff --git a/cssGrids/grid-alignment-&-centering.html b/cssGrids/grid-alignment-&-centering.html new file mode 100644 index 0000000..e3454ff --- /dev/null +++ b/cssGrids/grid-alignment-&-centering.html @@ -0,0 +1,99 @@ + + + + + + + + Alignment and Centering + + + +
+

justify-content and align-content

+

+ Sometimes the total size of your grid might be less than the size of its grid container. In this case you can set the + alignment of the grid within the grid container. justify-content property aligns the grid along the + inline (row) axis and align-content which aligns the grid along the block (column) axis). +

+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
+
+
+

justify-items and align-items

+

+ justify-items aligns grid items along the inline (row) axis and align-items which aligns + along the block (column) axis). These value applies to all grid items inside the container. +

+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
+
+
+

justify-self and align-self

+

+ justify-self aligns a grid item inside a cell along the inline (row) axis and align-self + which aligns along the block (column) axis). This value applies to a grid item inside a single cell. +

+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
+
+ + \ No newline at end of file