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
- - -
- - - \ 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-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 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/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 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 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 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 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 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