Unreviewed, add CSS Grid Layout examples for a blog post.
[WebKit-https.git] / Websites / webkit.org / demos / css-grid / index.html
1 <!DOCTYPE html>
2 <title>CSS Grid Layout Examples</title>
3 <style>
4     .grid {
5         display: inline-grid;
6         border: 0.1em solid;
7         border-radius: 0.2em;
8         font-size: 2em;
9     }
10
11     .grid > div {
12         margin: 0.05em;
13         border-width: 0.1em;
14         border-style: solid;
15         border-radius: 0.2em;
16         padding: 0.5em;
17         font-family: monospace;
18     }
19
20     .item-1 {
21         background-color: rgba(242, 46, 138, 0.8);
22         border-color: rgb(242, 46, 138);
23     }
24
25     .item-2 {
26         background-color: rgba(98, 205, 217, 0.8);
27         border-color: rgb(98, 205, 217);
28     }
29
30     .item-3 {
31         background-color: rgba(117, 191, 6 , 0.8);
32         border-color: rgb(117, 191, 6);
33     }
34
35     .item-4 {
36         background-color: rgba(242, 226, 5, 0.8);
37         border-color: rgb(242, 226, 5);
38     }
39
40     .item-5 {
41         background-color: rgba(242, 54, 12, 0.8);
42         border-color: rgb(242, 54, 12);
43     }
44
45     .item-6 {
46         background-color: rgba(166, 0, 62, 0.8);
47         border-color: rgb(166, 0, 62);
48     }
49
50     .bold {
51         font-weight: bold;
52     }
53
54     .small {
55         font-size: 50%;
56     }
57
58     .medium {
59         font-size: 75%;
60     }
61
62     .big {
63         font-size: 150%;
64     }
65
66
67     iframe {
68         width: 800px;
69         height: 600px;
70         animation: resize 8s infinite alternate;
71     }
72
73     @keyframes resize {
74         to { width: 400px; }
75     }
76 </style>
77
78 <h1>CSS Grid Layout Examples</h1>
79
80 <h2>Grid Definition</h2>
81
82 <pre>
83     display: grid;
84     grid-template-rows: 100px 100px;
85     grid-template-columns: 400px 200px 100px;
86 </pre>
87
88 <div class="grid" style="grid-template-rows: 100px 100px; grid-template-columns: 400px 200px 100px;">
89     <div class="item-1 big">A</div>
90     <div class="item-2 big">B</div>
91     <div class="item-3 big">C</div>
92     <div class="item-4 big">D</div>
93     <div class="item-5 big">E</div>
94     <div class="item-6 big">F</div>
95 </div>
96
97 <h2>Grid Areas</h2>
98
99 <pre>
100     display: grid;
101     grid-template-areas: "header  header"
102                          "sidebar main  "
103                          "sidebar footer";
104 </pre>
105
106 <div class="grid" style='grid-template-areas: "header  header"
107                                               "sidebar main  "
108                                               "sidebar footer";'>
109     <div class="item-1" style="grid-area: header;">header</div>
110     <div class="item-2" style="grid-area: sidebar;">sidebar</div>
111     <div class="item-3" style="grid-area: main;">main</div>
112     <div class="item-4" style="grid-area: footer;">footer</div>
113 </div>
114
115 <h2>Item Placement</h2>
116
117 <pre>
118     display: grid;
119     grid: repeat(4, 100px) / repeat(4, 150px);
120 </pre>
121
122 <div class="grid" style="grid: repeat(4, 100px) / repeat(4, 150px);">
123     <div class="item-1 small" style="grid-row: 3; grid-column: 2;">grid-row: 3;<br><br>grid-column: 2;</div>
124     <div class="item-2 medium" style="grid-row: 2 / 5; grid-column: 3 / span 2;">grid-row: 2 / 5;<br><br>grid-column:<br>3 / span 2;</div>
125 </div>
126
127 <h2>Alignment</h2>
128
129 <h3>Grid Tracks Alignment</h3>
130
131 <pre>
132     display: grid;
133     grid: 100px 100px / 150px 150px 150px;
134     height: 500px;
135     width: 650px;
136     align-content: center;
137     justify-content: space-evenly;
138 </pre>
139
140 <div class="grid" style="grid: 100px 100px / 150px 150px 150px; height: 500px; width: 650px; align-content: center; justify-content: space-evenly;">
141     <div class="item-1 small" style="grid-row: 1; grid-column: 1  / 3;">grid-row: 1;<br><br>grid-column: 1 / 3;</div>
142     <div class="item-2 small" style="grid-row: 1 / 3; grid-column: 3;">grid-row: 1 / 3;<br><br>grid-column: 3;</div>
143     <div class="item-3 small" style="grid-row: 2; grid-column: 1;">grid-row: 2;<br><br>grid-column: 1;</div>
144     <div class="item-4 small" style="grid-row: 2; grid-column: 2;">grid-row: 2;<br><br>grid-column: 2;</div>
145 </div>
146
147 <h3>Grid Items Alignment</h3>
148
149 <pre>
150     display: grid;
151     grid: 200px 200px / 400px 400px;
152 </pre>
153
154 <div class="grid" style="grid: 200px 200px / 400px 400px;">
155     <div class="item-1 medium" style="align-self: stretch; justify-self: stretch;">align-self: stretch;<br><br>justify-self: stretch;</div>
156     <div class="item-2 medium" style="align-self: end; justify-self: start;">align-self: end;<br><br>justify-self: start;</div>
157     <div class="item-3 medium" style="grid-column: span 2; align-self: center; justify-self: center;">grid-column: span 2;<br><br>align-self: center;<br><br>justify-self: center;</div>
158 </div>
159
160 <h2>Responsive Design</h2>
161
162 <pre>
163     display: grid;
164     grid-gap: 10px 20px;
165     grid-template-rows: 100px 1fr auto;
166     grid-template-columns: 1fr 200px;
167     grid-template-areas: "title   title"
168                          "content aside"
169                          "footer  aside";
170
171     @media (max-width: 600px) {
172         grid-gap: 0;
173         grid-template-rows: auto 1fr auto auto;
174         grid-template-columns: 1fr;
175         grid-template-areas: "title  "
176                              "content"
177                              "aside  "
178                              "footer ";
179     }
180 </pre>
181
182 <iframe src="responsive-grid.html"></iframe>