Unreviewed, add CSS Grid Layout examples for a blog post.
[WebKit-https.git] / Websites / webkit.org / demos / css-grid / responsive-grid.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     html, body {
41         height: 100%;
42         padding: 0;
43         margin: 0;
44     }
45
46     .responsive {
47         display: grid;
48         height: 100%;
49         box-sizing: border-box;
50         grid-gap: 10px 20px;
51         grid-template-rows: 100px 1fr auto;
52         grid-template-columns: 1fr 200px;
53         grid-template-areas: "title   title"
54                              "content aside"
55                              "footer  aside";
56     }
57
58     .title {
59         grid-area: title;
60     }
61
62     .content {
63         grid-area: content;
64     }
65
66     .aside {
67         grid-area: aside;
68     }
69
70     .footer {
71         grid-area: footer;
72     }
73
74     @media (max-width: 600px) {
75         .responsive {
76             grid-gap: 0;
77             grid-template-rows: auto 1fr auto auto;
78             grid-template-columns: 1fr;
79             grid-template-areas: "title  "
80                                  "content"
81                                  "aside  "
82                                  "footer ";
83         }
84     }
85 </style>
86
87 <div class="grid responsive">
88     <div class="item-1 title">Title</div>
89     <div class="item-2 content">Content</div>
90     <div class="item-3 aside">Aside</div>
91     <div class="item-4 footer">Footer</div>
92 </div>