CSS-Grid-101/index.html at master · joeygrable94/CSS-Grid-101 · GitHub

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html  lang="en-us">
<head>

	<!-- meta -->
	<title>CSS Grid 101 | JoeyGrable94</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="author" content="Joey Grable">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="copyright" content="copyright Joey Grable">
	<meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- responsive -->
	<meta name="robots" content="noindex"><!-- no SEO -->

	<!-- css -->
	<link rel="stylesheet" type="text/css" href="./inc/css/reset.css">
	<link rel="stylesheet" type="text/css" href="./inc/css/root.css">
	<link rel="stylesheet" type="text/css" href="./inc/css/typography.css">
	<link rel="stylesheet" type="text/css" href="./inc/css/forms.css">
	<link rel="stylesheet" type="text/css" href="./inc/css/tables.css">
	<link rel="stylesheet" type="text/css" href="./inc/css/buttons.css">
	<link rel="stylesheet" type="text/css" href="./inc/css/grid-base.css">

	<!-- js -->
	<script src="http://code.jquery.com/jquery-3.3.1.min.js"
			integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
			crossorigin="anonymous"></script>
	<script type="text/javascript" src="./inc/js/app.js"></script>

</head>
<body>

	<!-- header -->
	<header>
		<h1>CSS Grid</h1>
        <p class="float-right"><small>an exploration by <a href="https://github.com/JoeyGrable94" target="_blank">Joey Grable</a></small></p>
		<nav>
			<a href="./index.html">specs.</a>
			<a href="./grid-basics.html">1A: basics</a>
			<a href="./grid-ex2a.html">2A</a>
			<a href="./grid-ex2b.html">2B</a>
		</nav>
	</header>

	<main id="grid-specs">
		<h2>Parent Properties</h2>
<pre>
// PARENT PROPERTIES
// ============================================================

.GridParent {

    // GRIDPARENT
    // Declare GRID in the display property.
    display: grid;                        // grid || inline-grid || subgrid;

    // Defines the COLUMNS and ROWS of the GRID with a space-separated list of values.
    grid-template-columns: 1fr 1fr;       // track-size ... || line-name track-size ...;
    grid-template-rows: 1fr 1fr;          // track-size ... || line-name track-size ...;

        // EX1: [track-size]
        grid-template-columns: 40px 50px auto 50px 40px;
        grid-template-rows: 25% 100px auto;

        // EX2: [line-name]
        grid-template-columns: ["first"] 40px ["line2"] 50px ["line3"] auto ["col4-start"] 50px ["five"] 40px ["end"];
        grid-template-rows: ["row1-start"] 25% ["row1-end"] 100px ["third-line"] auto ["last-line"];

        // EX3:
        grid-template-columns: 100px 50px 100px;
        grid-template-rows: 80px auto 80px;

    // GRID LINES
    // Specifies the size of the GRID lines.
    grid-column-gap: 10px;                // line-size;
    grid-row-gap: 4em;                    // line-size;
    grid-gap: 20px 2em;                   // shorthand for: grid-row-gap grid-column-gap;

    // Shorthand GRID creation
    grid:;                                // none || grid-template-rows / grid-template-columns || grid-auto-flow [grid-auto-rows [/ grid-auto-columns]];

    // SPACING & ALIGNMENT
    // Aligns the CONTENT inside a grid item along the ROW axis.
    justify-items: start;                 // start || end || center || stretch;

    // Aligns the CONTENT inside a grid item along the COLUMN axis.
    align-items: start;                   // start || end || center || stretch;

    // This property aligns the GRID along the ROW axis.
    justify-content: start;               // start || end || center || stretch || space-around || space-between || space-evenly;

    // This property aligns the GRID along the COLUMN axis.
    align-content: start;                 // start || end || center || stretch || space-around || space-between || space-evenly;

}
</pre>

		<h2>Children Properties</h2>
<pre>
// CHILDREN PROPERTIES
// ============================================================
.GridChild {

    // GRIDCHILD
    // Determines a grid item's location within the grid by referring to specific grid lines.
    grid-column-start:;                   // number || name> || span number || span name || auto;
    grid-column-end:;                     // number || name> || span number || span name || auto;
    grid-row-start:;                      // number || name> || span number || span name || auto;
    grid-row-end:;                        // number || name> || span number || span name || auto;

        // EX1:
        grid-column-start: 2;
        grid-column-end: five;
        grid-row-start: row1-start;
        grid-row-end: span 3;

    // Shorthand
    grid-column:;                         // start-line / end-line || start-line / span value;
    grid-row:;                            // start-line / end-line || start-line / span value;

        // EX1:
        grid-column: 3 / span 2;
        grid-row: third-line / 4;

    // Short-shorthand for grid-row-start + grid-column-start + grid-row-end + grid-column-end
    grid-area:;                           // name || row-start / column-start / row-end / column-end;

        // EX1: by grid-area name
        grid-area: header

        // EX2: columns & rows
        grid-area: 1 / col4-start / last-line / 6

    // SPACING & ALIGMNENT
    // Aligns the CONTENT inside a grid item along the ROW axis.
    justify-self:;                        // start || end || center || stretch;

    // Aligns along the CONTENT inside a grid item align the COLUMN axis.
    align-self:;                          // start || end || center || stretch;

}
</pre>
	</main>

</body>
</html>