├── _images-css-grid
    ├── 2.8-grid-gap.png
    ├── 1-css3-logo-1.png
    ├── 2.7-grid-row-gap.png
    ├── 4.6-images
    │   ├── chrome.png
    │   ├── opera.png
    │   ├── safari.png
    │   ├── epiphany.png
    │   ├── firefox.png
    │   └── internet-explorer.png
    ├── 2.6-grid-column-gap.png
    ├── 4.1.1-demo-mosaic-layout.png
    ├── 4.5-demo-grid-card-layout.png
    ├── 2.11.1-nested-grid-template.png
    ├── 2.11.2-nested-grid-template.png
    ├── 2.11.3-nested-grid-template.png
    ├── 1.4-css-grid-browser-support.png
    ├── 3.5.1-default-basic-alignment.png
    ├── 3.4.1-grid-lines-grid-row-layout.png
    ├── 3.4.2-grid-lines-grid-row-layout.png
    ├── 3.5.2-grid-design-justify-align.png
    ├── 3.5.3-grid-design-justify-align.png
    ├── 4.4.1-demo-grid-columner-layout.png
    ├── 4.4.2-demo-grid-auto-flow-dense.png
    ├── 4.6-demo-grid-card-nested-layout.png
    ├── 1.5-grid-container-item-1-default.png
    ├── 2.1.1-grid-container-display-grid.png
    ├── 2.4.1-grid-template-columns-repeat.png
    ├── 2.9.1-grid-template-area-web-layout.png
    ├── 2.9.2-grid-template-area-web-layout.png
    ├── 3.3.1-grid-lines-grid-column-layout.png
    ├── 3.3.2-grid-lines-grid-column-layout.png
    ├── 4.3.1-demo-grid-column-row-layout.png
    ├── 2.2.1-grid-template-columns-width-px.png
    ├── 2.4.2.1-grid-template-columns-repeat.png
    ├── 2.4.2.2-grid-template-columns-repeat.png
    ├── 2.5.1.1-grid-template-rows-height-px.png
    ├── 4.2.1-demo-responsive-layout-desktop.png
    ├── 2.1.2-grid-container-display-inline-grid.png
    ├── 2.2.3-grid-template-columns-width-auto.png
    ├── 2.5.1.3-grid-template-rows-height-auto.png
    ├── 2.5.2.1-grid-template-rows-height-minmax.png
    ├── 4.1.2-demo-mosaic-layout-transform-rotate.png
    ├── 4.2.2-demo-responsive-layout-mobile-basic.png
    ├── 4.3.2-demo-custom-12-column-grid-framework.png
    ├── 2.2.2-grid-template-columns-width-percentage.png
    ├── 2.5.1.2-grid-template-rows-height-percentage.png
    ├── 3.4.3-grid-lines-grid-column-row-layout-span.png
    ├── 3.4.4-grid-lines-grid-column-row-layout-span.png
    ├── 4.2.3-demo-responsive-layout-mobile-enhanced.png
    ├── 2.3.1-grid-template-columns-width-fr-fraction-unit.png
    ├── 2.3.2-grid-template-columns-width-fr-fraction-unit.png
    ├── 2.5.1.4-grid-template-rows-height-fr-fraction-unit.png
    ├── 3.1.1-grid-lines-grid-column-start-end-web-layout.png
    ├── 3.1.2-grid-lines-grid-column-start-end-web-layout.png
    ├── 3.2.1.1-grid-lines-grid-row-start-end-web-layout.png
    ├── 3.2.1.2-grid-lines-grid-row-start-end-web-layout.png
    ├── 3.2.2.1-grid-lines-grid-row-start-end-web-layout.png
    ├── 2.9.3.1-grid-template-area-web-layout-empty-cell-area.png
    └── 2.9.3.2-grid-template-area-web-layout-empty-cell-area.png
└── _examples-css-grid
    ├── 2.4.1-grid-template-columns-repeat.html
    ├── 4.1-demo-mosaic-layout.html
    ├── 2.6-grid-column-gap.html
    ├── 2.3-grid-template-columns-width-fr-fraction-unit.html
    ├── 2.7-grid-row-gap.html
    ├── 2.2-grid-template-columns-width-px-auto.html
    ├── 2.8-grid-gap.html
    ├── 2.4.2-grid-template-columns-repeat.html
    ├── 3.1.1-grid-lines-grid-column-start-end-web-layout.html
    ├── 3.1.2-grid-lines-grid-column-start-end-web-layout.html
    ├── 2.5.2-grid-template-rows-height-minmax.html
    ├── 2.9.1-grid-template-area-web-layout.html
    ├── 3.2.2-grid-lines-grid-row-start-end-web-layout.html
    ├── 2.9.3-grid-template-area-web-layout-empty-cell-area.html
    ├── 2.9.2-grid-template-area-web-layout.html
    ├── 3.3.1-grid-lines-grid-column-layout.html
    ├── 3.3.2-grid-lines-grid-column-layout.html
    ├── 3.2.1-grid-lines-grid-row-start-end-web-layout.html
    ├── 1.5-grid-container-item.html
    ├── 3.4.2-grid-lines-grid-row-layout.html
    ├── 3.5-grid-item-alignment-justify-align-self.html
    ├── 2.5.1-grid-template-rows-height-px-auto-fr-fraction-unit.html
    ├── 3.4.1-grid-lines-grid-row-layout.html
    ├── 2.11-nested-grid-template.html
    ├── 4.3-demo-custom-12-column-grid-framework.html
    ├── 3.4.3-grid-lines-grid-column-row-layout-span.html
    ├── 4.2-demo-responsive-grid-layout.html
    ├── 3.4.4-grid-lines-grid-column-row-layout-span.html
    ├── 4.4-demo-grid-auto-flow-dense.html
    └── 4.5-demo-grid-card-layout.html


/_images-css-grid/2.8-grid-gap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/2.8-grid-gap.png


--------------------------------------------------------------------------------
/_images-css-grid/1-css3-logo-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/1-css3-logo-1.png


--------------------------------------------------------------------------------
/_images-css-grid/2.7-grid-row-gap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/2.7-grid-row-gap.png


--------------------------------------------------------------------------------
/_images-css-grid/4.6-images/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/4.6-images/chrome.png


--------------------------------------------------------------------------------
/_images-css-grid/4.6-images/opera.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/4.6-images/opera.png


--------------------------------------------------------------------------------
/_images-css-grid/4.6-images/safari.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/4.6-images/safari.png


--------------------------------------------------------------------------------
/_images-css-grid/2.6-grid-column-gap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/2.6-grid-column-gap.png


--------------------------------------------------------------------------------
/_images-css-grid/4.6-images/epiphany.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/4.6-images/epiphany.png


--------------------------------------------------------------------------------
/_images-css-grid/4.6-images/firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/4.6-images/firefox.png


--------------------------------------------------------------------------------
/_images-css-grid/4.1.1-demo-mosaic-layout.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/4.1.1-demo-mosaic-layout.png


--------------------------------------------------------------------------------
/_images-css-grid/4.5-demo-grid-card-layout.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/4.5-demo-grid-card-layout.png


--------------------------------------------------------------------------------
/_images-css-grid/2.11.1-nested-grid-template.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/2.11.1-nested-grid-template.png


--------------------------------------------------------------------------------
/_images-css-grid/2.11.2-nested-grid-template.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/2.11.2-nested-grid-template.png


--------------------------------------------------------------------------------
/_images-css-grid/2.11.3-nested-grid-template.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/2.11.3-nested-grid-template.png


--------------------------------------------------------------------------------
/_images-css-grid/1.4-css-grid-browser-support.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/1.4-css-grid-browser-support.png


--------------------------------------------------------------------------------
/_images-css-grid/3.5.1-default-basic-alignment.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/3.5.1-default-basic-alignment.png


--------------------------------------------------------------------------------
/_images-css-grid/4.6-images/internet-explorer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/4.6-images/internet-explorer.png


--------------------------------------------------------------------------------
/_images-css-grid/3.4.1-grid-lines-grid-row-layout.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/3.4.1-grid-lines-grid-row-layout.png


--------------------------------------------------------------------------------
/_images-css-grid/3.4.2-grid-lines-grid-row-layout.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/3.4.2-grid-lines-grid-row-layout.png


--------------------------------------------------------------------------------
/_images-css-grid/3.5.2-grid-design-justify-align.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/3.5.2-grid-design-justify-align.png


--------------------------------------------------------------------------------
/_images-css-grid/3.5.3-grid-design-justify-align.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/3.5.3-grid-design-justify-align.png


--------------------------------------------------------------------------------
/_images-css-grid/4.4.1-demo-grid-columner-layout.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/4.4.1-demo-grid-columner-layout.png


--------------------------------------------------------------------------------
/_images-css-grid/4.4.2-demo-grid-auto-flow-dense.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/4.4.2-demo-grid-auto-flow-dense.png


--------------------------------------------------------------------------------
/_images-css-grid/4.6-demo-grid-card-nested-layout.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/4.6-demo-grid-card-nested-layout.png


--------------------------------------------------------------------------------
/_images-css-grid/1.5-grid-container-item-1-default.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/1.5-grid-container-item-1-default.png


--------------------------------------------------------------------------------
/_images-css-grid/2.1.1-grid-container-display-grid.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/2.1.1-grid-container-display-grid.png


--------------------------------------------------------------------------------
/_images-css-grid/2.4.1-grid-template-columns-repeat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/2.4.1-grid-template-columns-repeat.png


--------------------------------------------------------------------------------
/_images-css-grid/2.9.1-grid-template-area-web-layout.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/2.9.1-grid-template-area-web-layout.png


--------------------------------------------------------------------------------
/_images-css-grid/2.9.2-grid-template-area-web-layout.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/2.9.2-grid-template-area-web-layout.png


--------------------------------------------------------------------------------
/_images-css-grid/3.3.1-grid-lines-grid-column-layout.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/3.3.1-grid-lines-grid-column-layout.png


--------------------------------------------------------------------------------
/_images-css-grid/3.3.2-grid-lines-grid-column-layout.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/3.3.2-grid-lines-grid-column-layout.png


--------------------------------------------------------------------------------
/_images-css-grid/4.3.1-demo-grid-column-row-layout.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/4.3.1-demo-grid-column-row-layout.png


--------------------------------------------------------------------------------
/_images-css-grid/2.2.1-grid-template-columns-width-px.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/2.2.1-grid-template-columns-width-px.png


--------------------------------------------------------------------------------
/_images-css-grid/2.4.2.1-grid-template-columns-repeat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/2.4.2.1-grid-template-columns-repeat.png


--------------------------------------------------------------------------------
/_images-css-grid/2.4.2.2-grid-template-columns-repeat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/2.4.2.2-grid-template-columns-repeat.png


--------------------------------------------------------------------------------
/_images-css-grid/2.5.1.1-grid-template-rows-height-px.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/2.5.1.1-grid-template-rows-height-px.png


--------------------------------------------------------------------------------
/_images-css-grid/4.2.1-demo-responsive-layout-desktop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/4.2.1-demo-responsive-layout-desktop.png


--------------------------------------------------------------------------------
/_images-css-grid/2.1.2-grid-container-display-inline-grid.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/2.1.2-grid-container-display-inline-grid.png


--------------------------------------------------------------------------------
/_images-css-grid/2.2.3-grid-template-columns-width-auto.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/2.2.3-grid-template-columns-width-auto.png


--------------------------------------------------------------------------------
/_images-css-grid/2.5.1.3-grid-template-rows-height-auto.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/2.5.1.3-grid-template-rows-height-auto.png


--------------------------------------------------------------------------------
/_images-css-grid/2.5.2.1-grid-template-rows-height-minmax.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/2.5.2.1-grid-template-rows-height-minmax.png


--------------------------------------------------------------------------------
/_images-css-grid/4.1.2-demo-mosaic-layout-transform-rotate.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/4.1.2-demo-mosaic-layout-transform-rotate.png


--------------------------------------------------------------------------------
/_images-css-grid/4.2.2-demo-responsive-layout-mobile-basic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/4.2.2-demo-responsive-layout-mobile-basic.png


--------------------------------------------------------------------------------
/_images-css-grid/4.3.2-demo-custom-12-column-grid-framework.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/4.3.2-demo-custom-12-column-grid-framework.png


--------------------------------------------------------------------------------
/_images-css-grid/2.2.2-grid-template-columns-width-percentage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/2.2.2-grid-template-columns-width-percentage.png


--------------------------------------------------------------------------------
/_images-css-grid/2.5.1.2-grid-template-rows-height-percentage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/2.5.1.2-grid-template-rows-height-percentage.png


--------------------------------------------------------------------------------
/_images-css-grid/3.4.3-grid-lines-grid-column-row-layout-span.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/3.4.3-grid-lines-grid-column-row-layout-span.png


--------------------------------------------------------------------------------
/_images-css-grid/3.4.4-grid-lines-grid-column-row-layout-span.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/3.4.4-grid-lines-grid-column-row-layout-span.png


--------------------------------------------------------------------------------
/_images-css-grid/4.2.3-demo-responsive-layout-mobile-enhanced.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/4.2.3-demo-responsive-layout-mobile-enhanced.png


--------------------------------------------------------------------------------
/_images-css-grid/2.3.1-grid-template-columns-width-fr-fraction-unit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/2.3.1-grid-template-columns-width-fr-fraction-unit.png


--------------------------------------------------------------------------------
/_images-css-grid/2.3.2-grid-template-columns-width-fr-fraction-unit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/2.3.2-grid-template-columns-width-fr-fraction-unit.png


--------------------------------------------------------------------------------
/_images-css-grid/2.5.1.4-grid-template-rows-height-fr-fraction-unit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/2.5.1.4-grid-template-rows-height-fr-fraction-unit.png


--------------------------------------------------------------------------------
/_images-css-grid/3.1.1-grid-lines-grid-column-start-end-web-layout.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/3.1.1-grid-lines-grid-column-start-end-web-layout.png


--------------------------------------------------------------------------------
/_images-css-grid/3.1.2-grid-lines-grid-column-start-end-web-layout.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/3.1.2-grid-lines-grid-column-start-end-web-layout.png


--------------------------------------------------------------------------------
/_images-css-grid/3.2.1.1-grid-lines-grid-row-start-end-web-layout.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/3.2.1.1-grid-lines-grid-row-start-end-web-layout.png


--------------------------------------------------------------------------------
/_images-css-grid/3.2.1.2-grid-lines-grid-row-start-end-web-layout.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/3.2.1.2-grid-lines-grid-row-start-end-web-layout.png


--------------------------------------------------------------------------------
/_images-css-grid/3.2.2.1-grid-lines-grid-row-start-end-web-layout.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/3.2.2.1-grid-lines-grid-row-start-end-web-layout.png


--------------------------------------------------------------------------------
/_images-css-grid/2.9.3.1-grid-template-area-web-layout-empty-cell-area.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/2.9.3.1-grid-template-area-web-layout-empty-cell-area.png


--------------------------------------------------------------------------------
/_images-css-grid/2.9.3.2-grid-template-area-web-layout-empty-cell-area.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css-grid-beginners-tutorial/HEAD/_images-css-grid/2.9.3.2-grid-template-area-web-layout-empty-cell-area.png


--------------------------------------------------------------------------------
/_examples-css-grid/2.4.1-grid-template-columns-repeat.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 | 
 5 |   <head>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>2.4.1-grid-template-columns-repeat.html</title>
10 | 
11 |     <style type="text/css">
12 | 
13 |       body {
14 |         margin: 0;
15 |         padding: 0;
16 |         font-family: verdana;
17 |       }
18 | 
19 |       .main-container {
20 |         border: 4px solid #826a98;
21 |         width: 1000px;
22 |         margin: 0 auto;
23 | 
24 |         display: grid; /* block level grid container */
25 |        /* display: inline-grid; */ /* inline level grid container */
26 | 
27 |         grid-template-columns: repeat(2, 1fr); /* 2 columns of 1fr each of equal width */
28 |       }
29 | 
30 |       .item {
31 |         color: #ffffff;
32 |         font-size: 1rem;
33 |         padding: 0.75rem;
34 |         text-align: center;
35 |       }
36 | 
37 |       .main-container div:nth-child(odd) {
38 |         background: #8FBC8E;
39 |       }
40 | 
41 |       .main-container div:nth-child(even) {
42 |         background: #734F96;
43 |       }
44 | 
45 |     </style>
46 | 
47 |   </head>
48 | 
49 |   <body>
50 | 
51 |     <div class="main-container">
52 |       <div class="item item-1">item-1</div>
53 |       <div class="item item-2">item-2</div>
54 |       <div class="item item-3">item-3</div>
55 |       <div class="item item-4">item-4</div>
56 |       <div class="item item-5">item-5</div>
57 |       <div class="item item-6">item-6</div>
58 |       <div class="item item-7">item-7</div>
59 |       <div class="item item-8">item-8</div>
60 |       <div class="item item-9">item-9</div>
61 |       <div class="item item-10">item-10</div>
62 |     </div>
63 |     
64 |   </body>
65 |   
66 | </html>
67 | 


--------------------------------------------------------------------------------
/_examples-css-grid/4.1-demo-mosaic-layout.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 | 
 5 |   <head>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>4.1-demo-mosaic-layout.html</title>
10 | 
11 |     <style type="text/css">
12 | 
13 |       body {
14 |         margin: 0;
15 |         padding: 0;
16 |         font-family: verdana;
17 |       }
18 | 
19 |       .main-container {
20 |         width: 1000px;
21 |         margin: 0 auto;
22 | 
23 |         display: grid;
24 |         grid-template-columns: repeat(6, 1fr);
25 |         grid-auto-rows: minmax(100px, auto); /* 4.1.2 - 150px */
26 |         grid-gap: 10px;
27 | 
28 |         /* 4.1.2 */
29 |         /* transform: rotate(45deg) scale(0.5);   */
30 |       }
31 | 
32 |       .item {
33 |         background-color: #1e90ff;
34 |         color: #ffffff;
35 |         font-size: 1rem;
36 |         padding: 0.75rem;
37 |         text-align: center;
38 |       }
39 | 
40 |       .item-1 {
41 |         grid-column: 1/3;
42 |         grid-row: 1/5;
43 |       }
44 | 
45 |       .item-2 {
46 |         grid-column: 3/7;
47 |         grid-row: 1/3;
48 |       }
49 | 
50 |       .item-3 {
51 |         grid-column: 3/5;
52 |         grid-row: 3/5;
53 |       }
54 | 
55 |       .item-4 {
56 |         grid-column: 5/7;
57 |         grid-row: 3/7;
58 |       }
59 | 
60 |       .item-5 {
61 |         grid-column: 1/5;
62 |         grid-row: 5/7;
63 |       }
64 |     </style>
65 | 
66 |   </head>
67 | 
68 |   <body>
69 | 
70 |     <div class="main-container">
71 |       <div class="item item-1">item-1</div>
72 |       <div class="item item-2">item-2</div>
73 |       <div class="item item-3">item-3</div>
74 |       <div class="item item-4">item-4</div>
75 |       <div class="item item-5">item-5</div>
76 |     </div>
77 |     
78 |   </body>
79 |   
80 | </html>
81 | 


--------------------------------------------------------------------------------
/_examples-css-grid/2.6-grid-column-gap.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 | 
 5 |   <head>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>2.6-grid-column-gap.html</title>
10 | 
11 |     <style type="text/css">
12 | 
13 |       body {
14 |         margin: 0;
15 |         padding: 0;
16 |         font-family: verdana;
17 |       }
18 | 
19 |       .main-container {
20 |         border: 4px solid #826a98;
21 |         width: 1000px;
22 |         margin: 0 auto;
23 | 
24 |         display: grid; /* block level grid container */
25 |        /* display: inline-grid; */ /* inline level grid container */
26 | 
27 |         grid-column-gap: 10px;
28 |         /* grid-row-gap: 10px; */
29 |         /* grid-gap: 10px; */
30 | 
31 |         grid-template-columns: 150px 35% auto; /* width - in combination of pixel, percentage and auto */
32 |       }
33 | 
34 |       .item {
35 |         color: #ffffff;
36 |         font-size: 1rem;
37 |         padding: 0.75rem;
38 |         text-align: center;
39 |       }
40 | 
41 |       .main-container div:nth-child(odd) {
42 |         background: #8FBC8E;
43 |       }
44 | 
45 |       .main-container div:nth-child(even) {
46 |         background: #734F96;
47 |       }
48 | 
49 |     </style>
50 | 
51 |   </head>
52 | 
53 |   <body>
54 | 
55 |     <div class="main-container">
56 |       <div class="item item-1">item-1</div>
57 |       <div class="item item-2">item-2</div>
58 |       <div class="item item-3">item-3</div>
59 |       <div class="item item-4">item-4</div>
60 |       <div class="item item-5">item-5</div>
61 |       <div class="item item-6">item-6</div>
62 |       <div class="item item-7">item-7</div>
63 |       <div class="item item-8">item-8</div>
64 |       <div class="item item-9">item-9</div>
65 |       <!-- <div class="item item-10">item-10</div> -->
66 |     </div>
67 |     
68 |   </body>
69 |   
70 | </html>
71 | 


--------------------------------------------------------------------------------
/_examples-css-grid/2.3-grid-template-columns-width-fr-fraction-unit.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 | 
 5 |   <head>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>2.3-grid-template-columns-width-fr-fraction-unit.html</title>
10 | 
11 |     <style type="text/css">
12 | 
13 |       body {
14 |         margin: 0;
15 |         padding: 0;
16 |         font-family: verdana;
17 |       }
18 | 
19 |       .main-container {
20 |         border: 4px solid #826a98;
21 |         width: 1000px;
22 |         margin: 0 auto;
23 | 
24 |         display: grid; /* block level grid container */
25 |         /* display: inline-grid; */ /* inline level grid container */
26 | 
27 |         /* grid-template-columns: 200px 2fr 3fr; */ /* fr/fraction = proportionate size/space ie. 200px 320px 48px */
28 |         grid-template-columns: 1fr 200px; /* fr/fraction = proportionate size/space ie. 800px 200px */
29 |       }
30 | 
31 |       .item {
32 |         color: #ffffff;
33 |         font-size: 1rem;
34 |         padding: 0.75rem;
35 |         text-align: center;
36 |       }
37 | 
38 |       .main-container div:nth-child(odd) {
39 |         background: #8FBC8E;
40 |       }
41 | 
42 |       .main-container div:nth-child(even) {
43 |         background: #734F96;
44 |       }
45 |     
46 |     </style>
47 | 
48 |   </head>
49 | 
50 |   <body>
51 | 
52 |     <div class="main-container">
53 |       <div class="item item-1">item-1</div>
54 |       <div class="item item-2">item-2</div>
55 |       <div class="item item-3">item-3</div>
56 |       <div class="item item-4">item-4</div>
57 |       <div class="item item-5">item-5</div>
58 |       <div class="item item-6">item-6</div>
59 |       <div class="item item-7">item-7</div>
60 |       <div class="item item-8">item-8</div>
61 |       <div class="item item-9">item-9</div>
62 |       <!-- <div class="item item-10">item-10</div> -->
63 |     </div>
64 |     
65 |   </body>
66 |   
67 | </html>
68 | 


--------------------------------------------------------------------------------
/_examples-css-grid/2.7-grid-row-gap.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 | 
 5 |   <head>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>2.7-grid-row-gap</title>
10 | 
11 |     <style type="text/css">
12 | 
13 |       body {
14 |         margin: 0;
15 |         padding: 0;
16 |         font-family: verdana;
17 |       }
18 | 
19 |       .main-container {
20 |         border: 4px solid #826a98;
21 |         width: 1000px;
22 |         margin: 0 auto;
23 | 
24 |         display: grid; /* block level grid container */
25 |        /* display: inline-grid; */ /* inline level grid container */
26 | 
27 |         /* grid-column-gap: 10px; */
28 |         grid-row-gap: 10px;
29 |         /* grid-gap: 10px; */
30 | 
31 |         grid-template-columns: 150px 35% auto; /* width - in combination of pixel, percentage and auto */
32 | 
33 |         grid-template-rows: 100px 70px 100px; /* row height in pixel */
34 |       }
35 | 
36 |       .item {
37 |         color: #ffffff;
38 |         font-size: 1rem;
39 |         padding: 0.75rem;
40 |         text-align: center;
41 |       }
42 | 
43 |       .main-container div:nth-child(odd) {
44 |         background: #8FBC8E;
45 |       }
46 | 
47 |       .main-container div:nth-child(even) {
48 |         background: #734F96;
49 |       }
50 | 
51 |     </style>
52 | 
53 |   </head>
54 | 
55 |   <body>
56 | 
57 |     <div class="main-container">
58 |       <div class="item item-1">item-1</div>
59 |       <div class="item item-2">item-2</div>
60 |       <div class="item item-3">item-3</div>
61 |       <div class="item item-4">item-4</div>
62 |       <div class="item item-5">item-5</div>
63 |       <div class="item item-6">item-6</div>
64 |       <div class="item item-7">item-7</div>
65 |       <div class="item item-8">item-8</div>
66 |       <div class="item item-9">item-9</div>
67 |       <!-- <div class="item item-10">item-10</div> -->
68 |     </div>
69 |     
70 |   </body>
71 |   
72 | </html>
73 | 


--------------------------------------------------------------------------------
/_examples-css-grid/2.2-grid-template-columns-width-px-auto.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 | 
 5 |   <head>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>2.2-grid-template-columns-width-px-auto.html</title>
10 | 
11 |     <style type="text/css">
12 | 
13 |       body {
14 |         margin: 0;
15 |         padding: 0;
16 |         font-family: verdana;
17 |       }
18 | 
19 |       .main-container {
20 |         border: 4px solid #826a98;
21 |         width: 1000px;
22 |         margin: 0 auto;
23 | 
24 |         display: grid; /* block level grid container */
25 |         /* display: inline-grid; */ /* inline level grid container */
26 | 
27 |         /* grid-template-columns: 150px 350px 500px; */ /* 3 columns grid with different width - in pixel */
28 |         /* grid-template-columns: 15% 35% 50%; */ /* width - in percentage */
29 |         grid-template-columns: 150px 35% auto; /* width - in combination on pixel, percentage and auto */
30 |       }
31 | 
32 |       .item {
33 |         color: #ffffff;
34 |         font-size: 1rem;
35 |         padding: 0.75rem;
36 |         text-align: center;
37 |       }
38 | 
39 |       .main-container div:nth-child(odd) {
40 |         background: #8FBC8E;
41 |       }
42 | 
43 |       .main-container div:nth-child(even) {
44 |         background: #734F96;
45 |       }
46 | 
47 |     </style>
48 | 
49 |   </head>
50 | 
51 |   <body>
52 | 
53 |     <div class="main-container">
54 |       <div class="item item-1">item-1</div>
55 |       <div class="item item-2">item-2</div>
56 |       <div class="item item-3">item-3</div>
57 |       <div class="item item-4">item-4</div>
58 |       <div class="item item-5">item-5</div>
59 |       <div class="item item-6">item-6</div>
60 |       <div class="item item-7">item-7</div>
61 |       <div class="item item-8">item-8</div>
62 |       <div class="item item-9">item-9</div>
63 |       <!-- <div class="item item-10">item-10</div> -->
64 |     </div>
65 |     
66 |   </body>
67 |   
68 | </html>
69 | 


--------------------------------------------------------------------------------
/_examples-css-grid/2.8-grid-gap.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 | 
 5 |   <head>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>2.8-grid-gap.html</title>
10 | 
11 |     <style type="text/css">
12 | 
13 |       body {
14 |         margin: 0;
15 |         padding: 0;
16 |         font-family: verdana;
17 |       }
18 | 
19 |       .main-container {
20 |         border: 4px solid #826a98;
21 |         width: 1000px;
22 |         margin: 0 auto;
23 | 
24 |         display: grid; /* block level grid container */
25 |        /* display: inline-grid; */ /* inline level grid container */
26 | 
27 |         grid-column-gap: 10px;
28 |         /* grid-row-gap: 10px; */
29 | 
30 |         /* grid-gap: 20px; */ /* single value for both row as well column gap */
31 |         grid-gap: 20px 10px;
32 | 
33 |         grid-template-columns: 150px 35% auto; /* width - in combination of pixel, percentage and auto */
34 | 
35 |         grid-template-rows: 100px 70px 100px; /* row height in pixel */
36 |       }
37 | 
38 |       .item {
39 |         color: #ffffff;
40 |         font-size: 1rem;
41 |         padding: 0.75rem;
42 |         text-align: center;
43 |       }
44 | 
45 |       .main-container div:nth-child(odd) {
46 |         background: #8FBC8E;
47 |       }
48 | 
49 |       .main-container div:nth-child(even) {
50 |         background: #734F96;
51 |       }
52 | 
53 |     </style>
54 | 
55 |   </head>
56 | 
57 |   <body>
58 | 
59 |     <div class="main-container">
60 |       <div class="item item-1">item-1</div>
61 |       <div class="item item-2">item-2</div>
62 |       <div class="item item-3">item-3</div>
63 |       <div class="item item-4">item-4</div>
64 |       <div class="item item-5">item-5</div>
65 |       <div class="item item-6">item-6</div>
66 |       <div class="item item-7">item-7</div>
67 |       <div class="item item-8">item-8</div>
68 |       <div class="item item-9">item-9</div>
69 |       <!-- <div class="item item-10">item-10</div> -->
70 |     </div>
71 |     
72 |   </body>
73 |   
74 | </html>
75 | 


--------------------------------------------------------------------------------
/_examples-css-grid/2.4.2-grid-template-columns-repeat.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 | 
 5 |   <head>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>2.4.2-grid-template-columns-repeat.html</title>
10 | 
11 |     <style type="text/css">
12 | 
13 |       body {
14 |         margin: 0;
15 |         padding: 0;
16 |         font-family: verdana;
17 |       }
18 | 
19 |       .main-container {
20 |         border: 4px solid #826a98;
21 |         width: 1000px;
22 |         margin: 0 auto;
23 | 
24 |         display: grid; /* block level grid container */
25 |         /* display: inline-grid; */ /* inline level grid container */
26 |  
27 |         /* grid-template-columns: repeat(1, 1fr 2fr 1fr); */ /* repeate 3 columns 1 time and create 3 columns of different width */
28 | 
29 |         grid-template-columns: repeat(6, 1fr 2fr); /* repeate 2 columns 6 times = create 12 columns of different width */
30 |       }
31 | 
32 |       .item {
33 |         color: #ffffff;
34 |         font-size: 1rem;
35 |         padding: 0.75rem;
36 |         text-align: center;
37 |       }
38 | 
39 |       .main-container div:nth-child(odd) {
40 |         background: #8FBC8E;
41 |       }
42 | 
43 |       .main-container div:nth-child(even) {
44 |         background: #734F96;
45 |       }
46 | 
47 |     </style>
48 | 
49 |   </head>
50 | 
51 |   <body>
52 | 
53 |     <div class="main-container">
54 |       <div class="item item-1">item-1</div>
55 |       <div class="item item-2">item-2</div>
56 |       <div class="item item-3">item-3</div>
57 |       <div class="item item-4">item-4</div>
58 |       <div class="item item-5">item-5</div>
59 |       <div class="item item-6">item-6</div>
60 |       <div class="item item-7">item-7</div>
61 |       <div class="item item-8">item-8</div>
62 |       <div class="item item-9">item-9</div>
63 |       <div class="item item-10">item-10</div>
64 |       <div class="item item-11">item-11</div>
65 |       <div class="item item-12">item-12</div>
66 |     </div>
67 |     
68 |   </body>
69 |   
70 | </html>
71 | 


--------------------------------------------------------------------------------
/_examples-css-grid/3.1.1-grid-lines-grid-column-start-end-web-layout.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 | 
 5 |   <head>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>3.1.1-grid-lines-grid-column-start-end-web-layout.html</title>
10 | 
11 |     <style type="text/css">
12 | 
13 |       body {
14 |         margin: 0;
15 |         padding: 0;
16 |         font-family: verdana;
17 | 
18 |         color: #ffffff;
19 |         font-size: 1rem;
20 |         text-align: center;
21 |       }
22 | 
23 |       .main-container {
24 |         width: 980px;
25 |         margin: 0 auto;
26 |       
27 |         display: grid; /* block level grid container */
28 |         grid-template-columns: repeat(6, 1fr);
29 |         grid-template-rows: repeat(4, minmax(70px, auto));
30 |         grid-gap: 20px;
31 |       }
32 | 
33 |       .main-container > * {
34 |         background-color: #ff7f50;
35 |         padding: 20px;
36 |       }
37 | 
38 |       .header-section {
39 |         background-color: #e03f00;
40 |         grid-column-start: 1;
41 |         grid-column-end: 7;
42 |       }
43 | 
44 |       .main-section {
45 |         grid-column-start: 1;
46 |         grid-column-end: 5;
47 |       }
48 |       
49 |       .aside-section {
50 |         grid-column-start: 5;
51 |         grid-column-end: 7;
52 |       }
53 | 
54 |       .nav-section {
55 |         grid-column-start: 1;
56 |         grid-column-end: 3;
57 |       }
58 | 
59 |       .section {
60 |         grid-column-start: 3;
61 |         grid-column-end: 7;
62 |       }
63 | 
64 |       .footer-section {
65 |         background-color: #e03f00;
66 |         grid-column-start: 1;
67 |         grid-column-end: 7;
68 |       }
69 |     </style>
70 | 
71 |   </head>
72 | 
73 |   <body>
74 | 
75 |     <div class="main-container">
76 |       <header class="header-section"><h1>Header Section</h1></header>
77 |       <main class="main-section">Main Section</main>
78 |       <aside class="aside-section">Aside Section</aside>
79 |       <nav class="nav-section">Nav Section</nav>
80 |       <section class="section">Section Section</section>
81 |       <footer class="footer-section"><small>Footer Section</small></footer>
82 |     </div>
83 |     
84 |   </body>
85 |   
86 | </html>
87 | 


--------------------------------------------------------------------------------
/_examples-css-grid/3.1.2-grid-lines-grid-column-start-end-web-layout.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 | 
 5 |   <head>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>3.1.2-grid-lines-grid-column-start-end-web-layout.html</title>
10 | 
11 |     <style type="text/css">
12 | 
13 |       body {
14 |         margin: 0;
15 |         padding: 0;
16 |         font-family: verdana;
17 | 
18 |         color: #ffffff;
19 |         font-size: 1rem;
20 |         text-align: center;
21 |       }
22 | 
23 |       .main-container {
24 |         width: 980px;
25 |         margin: 0 auto;
26 |       
27 |         display: grid; /* block level grid container */
28 |         grid-template-columns: repeat(6, 1fr);
29 |         grid-template-rows: repeat(5, minmax(70px, auto));
30 |         grid-gap: 20px;
31 |       }
32 | 
33 |       .main-container > * {
34 |         background-color: #ff7f50;
35 |         padding: 20px;
36 |       }
37 | 
38 |       .header-section {
39 |         background-color: #e03f00;
40 |         grid-column-start: 1;
41 |         grid-column-end: 7;
42 |       }
43 | 
44 |       .main-section {
45 |         grid-column-start: 2;
46 |         grid-column-end: 6;
47 |       }
48 |       
49 |       .aside-section {
50 |         grid-column-start: 1;
51 |         grid-column-end: 4;
52 |       }
53 | 
54 |       .nav-section {
55 |         grid-column-start: 4;
56 |         grid-column-end: 7;
57 |       }
58 | 
59 |       .section {
60 |         grid-column-start: 2;
61 |         grid-column-end: 6;
62 |       }
63 | 
64 |       .footer-section {
65 |         background-color: #e03f00;
66 |         grid-column-start: 1;
67 |         grid-column-end: 7;
68 |       }
69 |     </style>
70 | 
71 |   </head>
72 | 
73 |   <body>
74 | 
75 |     <div class="main-container">
76 |       <header class="header-section"><h1>Header Section</h1></header>
77 |       <main class="main-section">Main Section</main>
78 |       <aside class="aside-section">Aside Section</aside>
79 |       <nav class="nav-section">Nav Section</nav>
80 |       <section class="section">Section Section</section>
81 |       <footer class="footer-section"><small>Footer Section</small></footer>
82 |     </div>
83 |     
84 |   </body>
85 |   
86 | </html>
87 | 


--------------------------------------------------------------------------------
/_examples-css-grid/2.5.2-grid-template-rows-height-minmax.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 | 
 5 |   <head>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>2.5.2-grid-template-rows-height-minmax.html</title>
10 | 
11 |     <style type="text/css">
12 | 
13 |       body {
14 |         margin: 0;
15 |         padding: 0;
16 |         font-family: verdana;
17 |       }
18 | 
19 |       .main-container {
20 |         border: 4px solid #826a98;
21 |         width: 1000px;
22 |         margin: 0 auto;
23 | 
24 |         display: grid; /* block level grid container */
25 |         /* display: inline-grid; */ /* inline level grid container */
26 | 
27 |         grid-template-columns: 150px 35% auto;
28 |         grid-template-rows: repeat(3, minmax(50px, auto)); /* repeat the rows with minimum height of 50px and maximum auto */
29 |       }
30 | 
31 |       .item {
32 |         color: #000;
33 |         font-size: 1rem;
34 |         padding: 0.75rem;
35 |         text-align: center;
36 |       }
37 | 
38 |       .main-container div:nth-child(odd) {
39 |         background: #8FBC8E;
40 |       }
41 | 
42 |       .main-container div:nth-child(even) {
43 |         background: #734F96;
44 |       }
45 | 
46 |     </style>
47 | 
48 |   </head>
49 | 
50 |   <body>
51 | 
52 |     <div class="main-container">
53 |       <div class="item item-1">item-1</div>
54 |       <div class="item item-2">item-2</div>
55 |       <div class="item item-3">item-3</div>
56 |       <div class="item item-4">item-4</div>
57 |       <div class="item item-5">item-5</div>
58 |       <div class="item item-6">item-6: Row height is by default depends on content 1 , Row height is by default depends on content 2 , Row height is by default depends on content 3, Row height is by default depends on content 4 , Row height is by default depends on content 5 , Row height is by default depends on content 6 , Row height is by default depends on content 7, Row height is by default depends on content 8</div>
59 |       <div class="item item-7">item-7</div>
60 |       <div class="item item-8">item-8</div>
61 |       <div class="item item-9">item-9</div>
62 |       <!-- <div class="item item-10">item-10</div> -->
63 |     </div>
64 |     
65 |   </body>
66 |   
67 | </html>
68 | 


--------------------------------------------------------------------------------
/_examples-css-grid/2.9.1-grid-template-area-web-layout.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 | 
 5 |   <head>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>2.9.1-grid-template-area-web-layout.html</title>
10 | 
11 |     <style type="text/css">
12 | 
13 |       body {
14 |         margin: 0;
15 |         padding: 0;
16 |         font-family: verdana;
17 | 
18 |         color: #ffffff;
19 |         font-size: 1rem;
20 |         text-align: center;
21 |       }
22 | 
23 |       .main-container {
24 |         width: 980px;
25 |         margin: 0 auto;
26 |       
27 |         display: grid; /* block level grid container */
28 |         grid-template-columns: repeat(4, 1fr);
29 |         grid-template-rows: auto;
30 |         grid-gap: 20px;
31 |         
32 |         grid-template-areas: 
33 |           "headerArea headerArea headerArea headerArea"
34 |           "mainArea mainArea asideArea asideArea"
35 |           "mainArea mainArea navArea navArea"
36 |           "sectionArea sectionArea sectionArea sectionArea"
37 |           "footerArea footerArea footerArea footerArea";
38 |       }
39 | 
40 |       .main-container > * {
41 |         background-color: #00bcd4;
42 |         padding: 20px;
43 |       }
44 | 
45 |       .header-section {
46 |         grid-area: headerArea;
47 |         background-color: #0199ad;
48 |       }
49 | 
50 |       .main-section {
51 |         grid-area: mainArea;
52 |       }
53 | 
54 |       .section {
55 |         grid-area: sectionArea;
56 |       }
57 | 
58 |       .aside-section {
59 |         grid-area: asideArea;
60 |       }
61 | 
62 |       .nav-section {
63 |         grid-area: navArea;
64 |       }
65 | 
66 |       .footer-section {
67 |         grid-area: footerArea;
68 |         background-color: #0199ad;
69 |       }
70 |     </style>
71 | 
72 |   </head>
73 | 
74 |   <body>
75 | 
76 |     <div class="main-container">
77 |       <header class="header-section"><h1>Header Section</h1></header>
78 |       <main class="main-section">Main Section</main>
79 |       <section class="section">Section Section</section>
80 |       <aside class="aside-section">Aside Section</aside>
81 |       <nav class="nav-section">Nav Section</nav>
82 |       <footer class="footer-section"><small>Footer Section</small></footer>
83 |     </div>
84 |     
85 |   </body>
86 |   
87 | </html>
88 | 


--------------------------------------------------------------------------------
/_examples-css-grid/3.2.2-grid-lines-grid-row-start-end-web-layout.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 | 
 5 |   <head>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>3.2.2-grid-lines-grid-row-start-end-web-layout.html</title>
10 | 
11 |     <style type="text/css">
12 | 
13 |       body {
14 |         margin: 0;
15 |         padding: 0;
16 |         font-family: verdana;
17 | 
18 |         color: #ffffff;
19 |         font-size: 1rem;
20 |         text-align: center;
21 |       }
22 | 
23 |       .main-container {
24 |         width: 980px;
25 |         margin: 0 auto;
26 |       
27 |         display: grid; /* block level grid container */
28 |         grid-template-columns: repeat(6, 1fr);
29 |         grid-template-rows: repeat(6, minmax(70px, auto));
30 |         grid-gap: 20px;
31 |       }
32 | 
33 |       .main-container > * {
34 |         background-color: #ff6c88;
35 |         padding: 20px;
36 |       }
37 | 
38 |       .header-section {
39 |         background-color: #ed143d;
40 |         grid-column-start: 1;
41 |         grid-column-end: 7;
42 |       }
43 | 
44 |       .main-section {
45 |         grid-column-start: 2;
46 |         grid-column-end: 6;
47 |       }
48 |       
49 |       .aside-section {
50 |         grid-column-start: 1;
51 |         grid-column-end: 4;
52 | 
53 |         grid-row-start: 3;
54 |         grid-row-end: 5;
55 |       }
56 | 
57 |       .nav-section {
58 |         grid-column-start: 4;
59 |         grid-column-end: 7;
60 |         
61 |         grid-row-start: 3;
62 |         grid-row-end: 5;
63 |       }
64 | 
65 |       .section {
66 |         grid-column-start: 2;
67 |         grid-column-end: 6;
68 |       }
69 | 
70 |       .footer-section {
71 |         background-color: #ed143d;
72 |         grid-column-start: 1;
73 |         grid-column-end: 7;
74 |       }
75 |     </style>
76 | 
77 |   </head>
78 | 
79 |   <body>
80 | 
81 |     <div class="main-container">
82 |       <header class="header-section"><h1>Header Section</h1></header>
83 |       <main class="main-section">Main Section</main>
84 |       <aside class="aside-section">Aside Section</aside>
85 |       <nav class="nav-section">Nav Section</nav>
86 |       <section class="section">Section Section</section>
87 |       <footer class="footer-section"><small>Footer Section</small></footer>
88 |     </div>
89 |     
90 |   </body>
91 |   
92 | </html>
93 | 


--------------------------------------------------------------------------------
/_examples-css-grid/2.9.3-grid-template-area-web-layout-empty-cell-area.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 | 
 5 |   <head>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>2.9.3-grid-template-area-web-layout-empty-cell-area.html</title>
10 | 
11 |     <style type="text/css">
12 | 
13 |       body {
14 |         margin: 0;
15 |         padding: 0;
16 |         font-family: verdana;
17 | 
18 |         color: #ffffff;
19 |         font-size: 1rem;
20 |         text-align: center;
21 |       }
22 | 
23 |       .main-container {
24 |         width: 980px;
25 |         margin: 0 auto;
26 |       
27 |         display: grid; /* block level grid container */
28 |         grid-template-columns: repeat(4, 1fr);
29 |         grid-auto-rows: minmax(80px, auto);
30 |         grid-gap: 20px;
31 |         
32 |         grid-template-areas: 
33 |           "headerArea headerArea headerArea headerArea"
34 |           "asideArea . mainArea mainArea "
35 |           ". . mainArea mainArea "
36 |           "navArea . sectionArea sectionArea"
37 |           ". . sectionArea sectionArea"
38 |           "footerArea footerArea footerArea footerArea";
39 |       }
40 | 
41 |       .main-container > * {
42 |         background-color: #00bcd4;
43 |         padding: 20px;
44 |       }
45 | 
46 |       .header-section {
47 |         grid-area: headerArea;
48 |         background-color: #0199ad;
49 |       }
50 | 
51 |       .main-section {
52 |         grid-area: mainArea;
53 |       }
54 | 
55 |       .section {
56 |         grid-area: sectionArea;
57 |       }
58 | 
59 |       .aside-section {
60 |         grid-area: asideArea;
61 |       }
62 | 
63 |       .nav-section {
64 |         grid-area: navArea;
65 |       }
66 | 
67 |       .footer-section {
68 |         grid-area: footerArea;
69 |         background-color: #0199ad;
70 |       }
71 |     </style>
72 | 
73 |   </head>
74 | 
75 |   <body>
76 | 
77 |     <div class="main-container">
78 |       <header class="header-section"><h1>Header Section</h1></header>
79 |       <main class="main-section">Main Section</main>
80 |       <section class="section">Section Section</section>
81 |       <aside class="aside-section">Aside Section</aside>
82 |       <nav class="nav-section">Nav Section</nav>
83 |       <footer class="footer-section"><small>Footer Section</small></footer>
84 |     </div>
85 |     
86 |   </body>
87 |   
88 | </html>
89 | 


--------------------------------------------------------------------------------
/_examples-css-grid/2.9.2-grid-template-area-web-layout.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 | 
 5 |   <head>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>2.9.2-grid-template-area-web-layout.html</title>
10 | 
11 |     <style type="text/css">
12 | 
13 |       body {
14 |         margin: 0;
15 |         padding: 0;
16 |         font-family: verdana;
17 | 
18 |         color: #ffffff;
19 |         font-size: 1rem;
20 |         text-align: center;
21 |       }
22 | 
23 |       .main-container {
24 |         width: 980px;
25 |         margin: 0 auto;
26 |       
27 |         display: grid; /* block level grid container */
28 |         grid-template-columns: repeat(4, 1fr);
29 |         grid-auto-rows: minmax(80px, auto);
30 |         grid-gap: 20px;
31 |         
32 |         grid-template-areas: 
33 |           "headerArea headerArea headerArea headerArea"
34 |           "asideArea asideArea mainArea mainArea "
35 |           "navArea navArea mainArea mainArea "
36 |           "sectionArea sectionArea sectionArea sectionArea"
37 |           "sectionArea sectionArea sectionArea sectionArea"
38 |           "footerArea footerArea footerArea footerArea";
39 |       }
40 | 
41 |       .main-container > * {
42 |         background-color: #00bcd4;
43 |         padding: 20px;
44 |       }
45 | 
46 |       .header-section {
47 |         grid-area: headerArea;
48 |         background-color: #0199ad;
49 |       }
50 | 
51 |       .main-section {
52 |         grid-area: mainArea;
53 |       }
54 | 
55 |       .section {
56 |         grid-area: sectionArea;
57 |       }
58 | 
59 |       .aside-section {
60 |         grid-area: asideArea;
61 |       }
62 | 
63 |       .nav-section {
64 |         grid-area: navArea;
65 |       }
66 | 
67 |       .footer-section {
68 |         grid-area: footerArea;
69 |         background-color: #0199ad;
70 |       }
71 |     </style>
72 | 
73 |   </head>
74 | 
75 |   <body>
76 | 
77 |     <div class="main-container">
78 |       <header class="header-section"><h1>Header Section</h1></header>
79 |       <main class="main-section">Main Section</main>
80 |       <section class="section">Section Section</section>
81 |       <aside class="aside-section">Aside Section</aside>
82 |       <nav class="nav-section">Nav Section</nav>
83 |       <footer class="footer-section"><small>Footer Section</small></footer>
84 |     </div>
85 |     
86 |   </body>
87 |   
88 | </html>
89 | 


--------------------------------------------------------------------------------
/_examples-css-grid/3.3.1-grid-lines-grid-column-layout.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 | 
 5 |   <head>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>3.3.1-grid-lines-grid-column-layout.html</title>
10 | 
11 |     <style type="text/css">
12 | 
13 |       body {
14 |         margin: 0;
15 |         padding: 0;
16 |         font-family: verdana;
17 | 
18 |         color: #ffffff;
19 |         font-size: 1rem;
20 |         text-align: center;
21 |       }
22 | 
23 |       .main-container {
24 |         width: 980px;
25 |         margin: 0 auto;
26 |       
27 |         display: grid; /* block level grid container */
28 |         grid-template-columns: repeat(6, 1fr);
29 |         grid-template-rows: repeat(4, minmax(70px, auto));
30 |         grid-gap: 20px;
31 |       }
32 | 
33 |       .main-container > * {
34 |         background-color: #ffaf5f;
35 |         padding: 20px;
36 |       }
37 | 
38 |       .header-section {
39 |         background-color: #e08931;
40 |         /* grid-column-start: 1;
41 |         grid-column-end: 7; */
42 |         grid-column: 1/7;
43 |       }
44 | 
45 |       .main-section {
46 |        /*  grid-column-start: 1;
47 |         grid-column-end: 5; */
48 |         grid-column:1/5;
49 |       }
50 |       
51 |       .aside-section {
52 |        /*  grid-column-start: 5;
53 |         grid-column-end: 7; */
54 |         grid-column: 5/7;
55 |       }
56 | 
57 |       .nav-section {
58 |         /* grid-column-start: 1;
59 |         grid-column-end: 3; */
60 |         grid-column: 1/3;
61 |       }
62 | 
63 |       .section {
64 |         /* grid-column-start: 3;
65 |         grid-column-end: 7; */
66 |         grid-column: 3/7;
67 |       }
68 | 
69 |       .footer-section {
70 |         background-color: #e08931;
71 |         /* grid-column-start: 1;
72 |         grid-column-end: 7; */
73 |         grid-column: 1/7;
74 |       }
75 |     </style>
76 | 
77 |   </head>
78 | 
79 |   <body>
80 | 
81 |     <div class="main-container">
82 |       <header class="header-section"><h1>Header Section</h1></header>
83 |       <main class="main-section">Main Section</main>
84 |       <aside class="aside-section">Aside Section</aside>
85 |       <nav class="nav-section">Nav Section</nav>
86 |       <section class="section">Section Section</section>
87 |       <footer class="footer-section"><small>Footer Section</small></footer>
88 |     </div>
89 |     
90 |   </body>
91 |   
92 | </html>
93 | 


--------------------------------------------------------------------------------
/_examples-css-grid/3.3.2-grid-lines-grid-column-layout.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 | 
 5 |   <head>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>3.3.2-grid-lines-grid-column-layout.html</title>
10 | 
11 |     <style type="text/css">
12 | 
13 |       body {
14 |         margin: 0;
15 |         padding: 0;
16 |         font-family: verdana;
17 | 
18 |         color: #ffffff;
19 |         font-size: 1rem;
20 |         text-align: center;
21 |       }
22 | 
23 |       .main-container {
24 |         width: 980px;
25 |         margin: 0 auto;
26 |       
27 |         display: grid; /* block level grid container */
28 |         grid-template-columns: repeat(6, 1fr);
29 |         grid-template-rows: repeat(5, minmax(70px, auto));
30 |         grid-gap: 20px;
31 |       }
32 | 
33 |       .main-container > * {
34 |         background-color: #ffaf5f;
35 |         padding: 20px;
36 |       }
37 | 
38 |       .header-section {
39 |         background-color: #e08931;
40 |         /* grid-column-start: 1;
41 |         grid-column-end: 7; */
42 |         grid-column: 1/7;
43 |       }
44 | 
45 |       .main-section {
46 |        /*  grid-column-start: 2;
47 |         grid-column-end: 6; */
48 |         grid-column: 2/6;
49 |       }
50 |       
51 |       .aside-section {
52 |         /* grid-column-start: 1;
53 |         grid-column-end: 4; */
54 |         grid-column: 1/4;
55 |       }
56 | 
57 |       .nav-section {
58 |         /* grid-column-start: 4;
59 |         grid-column-end: 7; */
60 |         grid-column: 4/7;
61 |       }
62 | 
63 |       .section {
64 |         /* grid-column-start: 2;
65 |         grid-column-end: 6; */
66 |         grid-column: 2/6;
67 |       }
68 | 
69 |       .footer-section {
70 |         background-color: #e08931;
71 |         /* grid-column-start: 1;
72 |         grid-column-end: 7; */
73 |         grid-column: 1/7;
74 |       }
75 |     </style>
76 | 
77 |   </head>
78 | 
79 |   <body>
80 | 
81 |     <div class="main-container">
82 |       <header class="header-section"><h1>Header Section</h1></header>
83 |       <main class="main-section">Main Section</main>
84 |       <aside class="aside-section">Aside Section</aside>
85 |       <nav class="nav-section">Nav Section</nav>
86 |       <section class="section">Section Section</section>
87 |       <footer class="footer-section"><small>Footer Section</small></footer>
88 |     </div>
89 |     
90 |   </body>
91 |   
92 | </html>
93 | 


--------------------------------------------------------------------------------
/_examples-css-grid/3.2.1-grid-lines-grid-row-start-end-web-layout.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 | 
 5 |   <head>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>3.2.1-grid-lines-grid-row-start-end-web-layout.html</title>
10 | 
11 |     <style type="text/css">
12 | 
13 |       body {
14 |         margin: 0;
15 |         padding: 0;
16 |         font-family: verdana;
17 | 
18 |         color: #ffffff;
19 |         font-size: 1rem;
20 |         text-align: center;
21 |       }
22 | 
23 |       .main-container {
24 |         width: 980px;
25 |         margin: 0 auto;
26 |       
27 |         display: grid; /* block level grid container */
28 |         grid-template-columns: repeat(6, 1fr);
29 |         grid-template-rows: repeat(5, minmax(70px, auto));
30 |         grid-gap: 20px;
31 |       }
32 | 
33 |       .main-container > * {
34 |         background-color: #ff6c88;
35 |         padding: 20px;
36 |       }
37 | 
38 |       .header-section {
39 |         background-color: #ed143d;
40 |         grid-column-start: 1;
41 |         grid-column-end: 7;
42 |       }
43 | 
44 |       .main-section {
45 |         grid-column-start: 1;
46 |         grid-column-end: 5;
47 | 
48 |         grid-row-start:2;
49 |         grid-row-end:4;
50 |       }
51 |       
52 |       .aside-section {
53 |         grid-column-start: 5;
54 |         grid-column-end: 7;
55 | 
56 |         grid-row-start:3;
57 |         grid-row-end:4;
58 |       }
59 | 
60 |       .nav-section {
61 |         grid-column-start: 1;
62 |         grid-column-end: 3;
63 |         
64 |       }
65 | 
66 |       .section {
67 |         grid-column-start: 3;
68 |         grid-column-end: 7;
69 | 
70 |         grid-row-start:4;
71 |         grid-row-end:6;
72 |       }
73 | 
74 |       .footer-section {
75 |         background-color: #ed143d;
76 |         grid-column-start: 1;
77 |         grid-column-end: 7;
78 |       }
79 |     </style>
80 | 
81 |   </head>
82 | 
83 |   <body>
84 | 
85 |     <div class="main-container">
86 |       <header class="header-section"><h1>Header Section</h1></header>
87 |       <main class="main-section">Main Section</main>
88 |       <aside class="aside-section">Aside Section</aside>
89 |       <nav class="nav-section">Nav Section</nav>
90 |       <section class="section">Section Section</section>
91 |       <footer class="footer-section"><small>Footer Section</small></footer>
92 |     </div>
93 |     
94 |   </body>
95 |   
96 | </html>
97 | 


--------------------------------------------------------------------------------
/_examples-css-grid/1.5-grid-container-item.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <html lang="en">
  4 | 
  5 |   <head>
  6 |     <meta charset="UTF-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  9 |     <title>1.5-grid-container-item</title>
 10 | 
 11 |     <style type="text/css">
 12 | 
 13 |       body {
 14 |         margin: 0;
 15 |         padding: 0;
 16 |         font-family: verdana;
 17 |       }
 18 | 
 19 |       .main-container {
 20 |         border: 4px solid #826a98;
 21 |         margin: 0 auto;
 22 | 
 23 |         /* display: grid; */ /* block level grid container */
 24 |         /* display: inline-grid; */ /* inline grid container */
 25 |       }
 26 | 
 27 |       .item {
 28 |         color: #ffffff;
 29 |         font-size: 1rem;
 30 |         padding: 0.75rem;
 31 |         text-align: center;
 32 |       }
 33 | 
 34 |       .main-container div:nth-child(odd) {
 35 |         background: #8FBC8E;
 36 |       }
 37 | 
 38 |       .main-container div:nth-child(even) {
 39 |         background: #734F96;
 40 |       }
 41 | 
 42 |       /*
 43 |       .item-1 {
 44 |         background-color:#DDA0DD;
 45 |       }
 46 | 
 47 |       .item-2 {
 48 |         background-color:#BF94E4;
 49 |       }
 50 | 
 51 |       .item-3 {
 52 |         background-color:#734F96;
 53 |       }
 54 | 
 55 |       .item-4 {
 56 |         background-color:#FBAED2;
 57 |       }
 58 | 
 59 |       .item-5 {
 60 |         background-color:#EE82EE;
 61 |       }
 62 |       
 63 |       .item-6 {
 64 |         background-color:#ADE4CA;
 65 |       }
 66 | 
 67 |       .item-7 {
 68 |         background-color:#A6D5AE;
 69 |       }
 70 | 
 71 |       .item-8 {
 72 |         background-color:#8FBC8E;
 73 |       }
 74 | 
 75 |       .item-9 {
 76 |         background-color: #64A466;
 77 |       }
 78 |       
 79 |       .item-10 {
 80 |         background-color:#2E8B56;
 81 |       }
 82 |       */
 83 | 
 84 |     </style>
 85 | 
 86 |   </head>
 87 | 
 88 |   <body>
 89 | 
 90 |     <div class="main-container">
 91 |       <div class="item item-1">item-1</div>
 92 |       <div class="item item-2">item-2</div>
 93 |       <div class="item item-3">item-3</div>
 94 |       <div class="item item-4">item-4</div>
 95 |       <div class="item item-5">item-5</div>
 96 |       <div class="item item-6">item-6</div>
 97 |       <div class="item item-7">item-7</div>
 98 |       <div class="item item-8">item-8</div>
 99 |       <div class="item item-9">item-9</div>
100 |       <!-- <div class="item item-10">item-10</div> -->
101 |     </div>
102 |     
103 |   </body>
104 |   
105 | </html>
106 | 


--------------------------------------------------------------------------------
/_examples-css-grid/3.4.2-grid-lines-grid-row-layout.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <html lang="en">
  4 | 
  5 |   <head>
  6 |     <meta charset="UTF-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  9 |     <title>3.4.2-grid-lines-grid-row-layout.html</title>
 10 | 
 11 |     <style type="text/css">
 12 | 
 13 |       body {
 14 |         margin: 0;
 15 |         padding: 0;
 16 |         font-family: verdana;
 17 | 
 18 |         color: #ffffff;
 19 |         font-size: 1rem;
 20 |         text-align: center;
 21 |       }
 22 | 
 23 |       .main-container {
 24 |         width: 980px;
 25 |         margin: 0 auto;
 26 |       
 27 |         display: grid; /* block level grid container */
 28 |         grid-template-columns: repeat(6, 1fr);
 29 |         grid-template-rows: repeat(6, minmax(70px, auto));
 30 |         grid-gap: 20px;
 31 |       }
 32 | 
 33 |       .main-container > * {
 34 |         background-color: #a9da41;
 35 |         padding: 20px;
 36 |       }
 37 | 
 38 |       .header-section {
 39 |         background-color: #739e17;
 40 |         /* grid-column-start: 1;
 41 |         grid-column-end: 7; */
 42 |         grid-column: 1/7;
 43 |       }
 44 | 
 45 |       .main-section {
 46 |         /* grid-column-start: 2;
 47 |         grid-column-end: 6; */
 48 |         grid-column: 2/6;
 49 |       }
 50 |       
 51 |       .aside-section {
 52 |         /* grid-column-start: 1;
 53 |         grid-column-end: 4;
 54 | 
 55 |         grid-row-start: 3;
 56 |         grid-row-end: 5; */
 57 |         grid-column: 1/4;
 58 |         grid-row:3/5;
 59 |       }
 60 | 
 61 |       .nav-section {
 62 |        /*  grid-column-start: 4;
 63 |         grid-column-end: 7;
 64 |         
 65 |         grid-row-start: 3;
 66 |         grid-row-end: 5; */
 67 |         grid-column: 4/7;
 68 |         grid-row: 3/5;
 69 |       }
 70 | 
 71 |       .section {
 72 |         /* grid-column-start: 2;
 73 |         grid-column-end: 6; */
 74 |         grid-column: 2/6;
 75 |       }
 76 | 
 77 |       .footer-section {
 78 |         background-color: #739e17;
 79 |         /* grid-column-start: 1;
 80 |         grid-column-end: 7; */
 81 |         grid-column: 1/7;
 82 |       }
 83 |     </style>
 84 | 
 85 |   </head>
 86 | 
 87 |   <body>
 88 | 
 89 |     <div class="main-container">
 90 |       <header class="header-section"><h1>Header Section</h1></header>
 91 |       <main class="main-section">Main Section</main>
 92 |       <aside class="aside-section">Aside Section</aside>
 93 |       <nav class="nav-section">Nav Section</nav>
 94 |       <section class="section">Section Section</section>
 95 |       <footer class="footer-section"><small>Footer Section</small></footer>
 96 |     </div>
 97 |     
 98 |   </body>
 99 |   
100 | </html>
101 | 


--------------------------------------------------------------------------------
/_examples-css-grid/3.5-grid-item-alignment-justify-align-self.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <html lang="en">
  4 | 
  5 |   <head>
  6 |     <meta charset="UTF-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  9 |     <title>3.5-grid-item-alignment-justify-align-self.html</title>
 10 | 
 11 |     <style type="text/css">
 12 | 
 13 |       body {
 14 |         margin: 0;
 15 |         padding: 0;
 16 |         font-family: verdana;
 17 |       }
 18 | 
 19 |       .main-container {
 20 |         width: 1000px;
 21 |         margin: 0 auto;
 22 | 
 23 |         /* 3.5.1 */
 24 |         display: grid;
 25 |         grid-template-columns: repeat(3, 1fr);
 26 |         grid-auto-rows: minmax(200px, auto);
 27 |         grid-gap: 10px;
 28 |       }
 29 | 
 30 |       .item {
 31 |         color: #ffffff;
 32 |         font-size: 1rem;
 33 |         padding: 0.75rem;
 34 |         text-align: center;
 35 |       }
 36 | 
 37 |       .main-container div:nth-child(odd) {
 38 |         background: #ffa500;
 39 |       }
 40 | 
 41 |       .main-container div:nth-child(even) {
 42 |         background: #008080;
 43 |       }
 44 | 
 45 |       /* 3.5.2 */
 46 | 
 47 |       /* .item-1 {
 48 |         justify-self: end;
 49 |         align-self: end;
 50 |       }
 51 | 
 52 |       .item-2 {
 53 |         justify-self: center;
 54 |         align-self: center;
 55 |       }
 56 | 
 57 |       .item-3 {
 58 |         justify-self: start;
 59 |         align-self: start;
 60 |       }
 61 | 
 62 |       .item-7 {
 63 |         justify-self: end;
 64 |         align-self: start;
 65 |       }
 66 | 
 67 |       .item-8 {
 68 |         justify-self: center;
 69 |         align-self: center;
 70 |       }
 71 | 
 72 |       .item-9 {
 73 |         justify-self: start;
 74 |         align-self: end;
 75 |       } */
 76 | 
 77 |       /* 3.5.3 */
 78 | 
 79 |       .main-container div:nth-child(odd) {
 80 |         justify-self: center;
 81 |         align-self: center;
 82 |       }
 83 | 
 84 |     </style>
 85 | 
 86 |   </head>
 87 | 
 88 |   <body>
 89 | 
 90 |     <div class="main-container">
 91 |       <div class="item item-1">item-1</div>
 92 |       <div class="item item-2">item-2</div>
 93 |       <div class="item item-3">item-3</div>
 94 |       <div class="item item-4">item-4</div>
 95 |       <div class="item item-5">item-5</div>
 96 |       <div class="item item-6">item-6</div>
 97 |       <div class="item item-7">item-7</div>
 98 |       <div class="item item-8">item-8</div>
 99 |       <div class="item item-9">item-9</div>
100 |    <!--    <div class="item item-10">item-10</div>
101 |       <div class="item item-11">item-11</div>
102 |       <div class="item item-12">item-12</div> -->
103 |     </div>
104 |     
105 |   </body>
106 |   
107 | </html>
108 | 


--------------------------------------------------------------------------------
/_examples-css-grid/2.5.1-grid-template-rows-height-px-auto-fr-fraction-unit.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 | 
 5 |   <head>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>2.5.1-grid-template-rows-px-auto-fr-fraction-unit.html</title>
10 | 
11 |     <style type="text/css">
12 | 
13 |       body {
14 |         margin: 0;
15 |         padding: 0;
16 |         font-family: verdana;
17 |       }
18 | 
19 |       .main-container {
20 |         border: 4px solid #826a98;
21 |         width: 1000px;
22 |         margin: 0 auto;
23 | 
24 |         height: 500px;
25 | 
26 |         display: grid; /* block level grid container */
27 |         /* display: inline-grid; */ /* inline level grid container */
28 | 
29 |         grid-template-columns: 150px 35% auto;
30 | 
31 |         /* grid-template-rows: 100px 300px 100px; */ /* defines the height of each row - in pixel */
32 |         /* grid-template-rows: 20% 60% 20%; */ /* height of each row - in percentage */
33 |         /* grid-template-rows: auto auto auto; */ /* height of each row - in combination of pixel, percentage and auto */
34 |         grid-template-rows: 1fr 2fr 1fr; /* height of each row - in fr fractional unit */
35 |       }
36 | 
37 |       .item {
38 |         color: #000;
39 |         font-size: 1rem;
40 |         padding: 0.75rem;
41 |         text-align: center;
42 |       }
43 | 
44 |       .main-container div:nth-child(odd) {
45 |         background: #8FBC8E;
46 |       }
47 | 
48 |       .main-container div:nth-child(even) {
49 |         background: #734F96;
50 |       }
51 | 
52 |     </style>
53 | 
54 |   </head>
55 | 
56 |   <body>
57 | 
58 |     <div class="main-container">
59 |       <div class="item item-1">item-1: Row height is by default depends on content</div>
60 |       <div class="item item-2">item-2</div>
61 |       <div class="item item-3">item-3</div>
62 |       <div class="item item-4">item-4</div>
63 |       <div class="item item-5">item-5</div>
64 |       <div class="item item-6">item-6: Row height is by default depends on content 1 , Row height is by default depends on content 2 , Row height is by default depends on content 3, Row height is by default depends on content 4 , Row height is by default depends on content 5 , Row height is by default depends on content 6 , Row height is by default depends on content 7, Row height is by default depends on content 8</div>
65 |       <div class="item item-7">item-7</div>
66 |       <div class="item item-8">item-8: Row height is by default depends on content 1 , Row height is by default depends on content 2 , Row height is by default depends on content 3, Row height is by default depends on content 4 </div>
67 |       <div class="item item-9">item-9</div>
68 |       <!-- <div class="item item-10">item-10</div> -->
69 |     </div>
70 |     
71 |   </body>
72 |   
73 | </html>
74 | 


--------------------------------------------------------------------------------
/_examples-css-grid/3.4.1-grid-lines-grid-row-layout.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <html lang="en">
  4 | 
  5 |   <head>
  6 |     <meta charset="UTF-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  9 |     <title>3.4.1-grid-lines-grid-row-layout.html</title>
 10 | 
 11 |     <style type="text/css">
 12 | 
 13 |       body {
 14 |         margin: 0;
 15 |         padding: 0;
 16 |         font-family: verdana;
 17 | 
 18 |         color: #ffffff;
 19 |         font-size: 1rem;
 20 |         text-align: center;
 21 |       }
 22 | 
 23 |       .main-container {
 24 |         width: 980px;
 25 |         margin: 0 auto;
 26 |       
 27 |         display: grid; /* block level grid container */
 28 |         grid-template-columns: repeat(6, 1fr);
 29 |         grid-template-rows: repeat(5, minmax(70px, auto));
 30 |         grid-gap: 20px;
 31 |       }
 32 | 
 33 |       .main-container > * {
 34 |         background-color: #a9da41;
 35 |         padding: 20px;
 36 |       }
 37 | 
 38 |       .header-section {
 39 |         background-color: #739e17;
 40 |         /* grid-column-start: 1;
 41 |         grid-column-end: 7; */
 42 | 
 43 |         grid-column: 1/7;
 44 |       }
 45 | 
 46 |       .main-section {
 47 |         /* grid-column-start: 1;
 48 |         grid-column-end: 5;
 49 | 
 50 |         grid-row-start:2;
 51 |         grid-row-end:4; */
 52 |         
 53 |         grid-column: 1/5;
 54 |         grid-row: 2/4;
 55 |       }
 56 |       
 57 |       .aside-section {
 58 |         /* grid-column-start: 5;
 59 |         grid-column-end: 7;
 60 | 
 61 |         grid-row-start:3;
 62 |         grid-row-end:4; */
 63 | 
 64 |         grid-column: 5/7;
 65 |         grid-row: 3/4;
 66 |       }
 67 | 
 68 |       .nav-section {
 69 |         /* grid-column-start: 1;
 70 |         grid-column-end: 3; */
 71 |         
 72 |         grid-column: 1/3;
 73 |       }
 74 | 
 75 |       .section {
 76 |         /* grid-column-start: 3;
 77 |         grid-column-end: 7;
 78 | 
 79 |         grid-row-start:4;
 80 |         grid-row-end:6; */
 81 | 
 82 |         grid-column: 3/7;
 83 |         grid-row: 4/6;
 84 |       }
 85 | 
 86 |       .footer-section {
 87 |         background-color: #739e17;
 88 |        /*  grid-column-start: 1;
 89 |         grid-column-end: 7; */
 90 | 
 91 |         grid-column: 1/7;
 92 |       }
 93 |     </style>
 94 | 
 95 |   </head>
 96 | 
 97 |   <body>
 98 | 
 99 |     <div class="main-container">
100 |       <header class="header-section"><h1>Header Section</h1></header>
101 |       <main class="main-section">Main Section</main>
102 |       <aside class="aside-section">Aside Section</aside>
103 |       <nav class="nav-section">Nav Section</nav>
104 |       <section class="section">Section Section</section>
105 |       <footer class="footer-section"><small>Footer Section</small></footer>
106 |     </div>
107 |     
108 |   </body>
109 |   
110 | </html>
111 | 


--------------------------------------------------------------------------------
/_examples-css-grid/2.11-nested-grid-template.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <html lang="en">
  4 | 
  5 |   <head>
  6 |     <meta charset="UTF-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  9 |     <title>2.11-nested-grid-template.html</title>
 10 | 
 11 |     <style type="text/css">
 12 | 
 13 |       body {
 14 |         margin: 0;
 15 |         padding: 0;
 16 |         font-family: verdana;
 17 | 
 18 |         color: #000000;
 19 |         font-size: 1rem;
 20 |         text-align: center;
 21 |       }
 22 | 
 23 |       .main-container {
 24 |         width: 980px;
 25 |         margin: 0 auto;
 26 |       
 27 |         display: grid; /* block level grid container */
 28 |         grid-template-columns: repeat(4, 1fr);
 29 |         grid-template-rows: auto;
 30 |         grid-gap: 20px;
 31 |         
 32 |         grid-template-areas: 
 33 |           "headerArea headerArea headerArea headerArea"
 34 |           "mainArea mainArea asideArea asideArea"
 35 |           "mainArea mainArea navArea navArea"
 36 |           "sectionArea sectionArea sectionArea sectionArea"
 37 |           "footerArea footerArea footerArea footerArea";
 38 |       }
 39 | 
 40 |       .main-container > * {
 41 |         background-color: #e6ba6c;
 42 |         padding: 20px;
 43 |       }
 44 | 
 45 |       .header-section {
 46 |         grid-area: headerArea;
 47 |         background-color: #bd7b04;
 48 |       }
 49 | 
 50 |       .main-section {
 51 |         grid-area: mainArea;
 52 |       }
 53 | 
 54 |       .section {
 55 |         grid-area: sectionArea;
 56 |       }
 57 | 
 58 |       .aside-section {
 59 |         grid-area: asideArea;
 60 |       }
 61 | 
 62 |       .nav-section {
 63 |         grid-area: navArea;
 64 |       }
 65 | 
 66 |       .footer-section {
 67 |         grid-area: footerArea;
 68 |         background-color: #bd7b04;
 69 |       }
 70 | 
 71 |       .nested-grid-container {
 72 |         margin-top: 20px;
 73 |         display: grid;
 74 |         grid-gap:10px;
 75 |         
 76 |         /* 2.11.1 */
 77 |         grid-template-columns: 1fr 1fr 1fr 1fr;
 78 |         grid-template-rows: 150px;
 79 | 
 80 |         /* 2.11.2 */
 81 |         /* grid-template-columns: 1fr 1fr;
 82 |         grid-template-rows: auto 150px; */
 83 | 
 84 |         /* 2.11.3 */
 85 |         /* grid-template-columns: 1fr 1fr; */
 86 |       }
 87 | 
 88 |       .nested-grid-container article{
 89 |         background-color: #bb8b34;
 90 |         padding:10px;
 91 |       }
 92 | 
 93 |     </style>
 94 | 
 95 |   </head>
 96 | 
 97 |   <body>
 98 | 
 99 |     <div class="main-container">
100 |       <header class="header-section"><h1>Header Section</h1></header>
101 |       
102 |       <main class="main-section">
103 |         <strong>Main Section with Nested Sub Section</strong>
104 | 
105 |         <section class="nested-grid-container">
106 |           <article class="article1">Article 1</article>
107 |           <article class="article2">Article 2</article>
108 |           <article class="article3">Article 3</article>
109 |           <article class="article4">Article 4</article>
110 |         </section>
111 | 
112 |       </main>
113 | 
114 |       <section class="section">Section Section</section>
115 |       <aside class="aside-section">Aside Section</aside>
116 |       <nav class="nav-section">Nav Section</nav>
117 |       <footer class="footer-section"><small>Footer Section</small></footer>
118 |     </div>
119 |     
120 |   </body>
121 |   
122 | </html>
123 | 


--------------------------------------------------------------------------------
/_examples-css-grid/4.3-demo-custom-12-column-grid-framework.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <html lang="en">
  4 | 
  5 |   <head>
  6 |     <meta charset="UTF-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  9 |     <title>4.3-demo-custom-12-column-grid-framework.html</title>
 10 | 
 11 |     <style type="text/css">
 12 | 
 13 |       body {
 14 |         margin: 0;
 15 |         padding: 0;
 16 |         font-family: verdana;
 17 | 
 18 |         color: #ffffff;
 19 |         font-size: 1rem;
 20 |         text-align: center;
 21 |       }
 22 | 
 23 |       .main-container {
 24 |         width: 960px;
 25 |         margin: 0 auto;
 26 |       
 27 |         display: grid;
 28 |         grid-template-columns: repeat(12, 1fr);
 29 |         grid-auto-rows: minmax(100px, auto);
 30 |         grid-gap: 10px;
 31 | 
 32 |         /* 4.3.2 custom 12 columner grid */
 33 |         position: relative;
 34 |       }
 35 | 
 36 |       /* 4.3.2 custom columner grid */
 37 |       /* #custom-grid-overlay-container {
 38 |         display: grid;
 39 |         grid-template-columns: repeat(12, 1fr);
 40 |         grid-auto-rows: minmax(100%, auto);
 41 |           
 42 |         position: absolute;
 43 |         width: 100%;
 44 |         height: 100%; 
 45 |         background: transparent;
 46 |         padding: 0;
 47 |         margin: 0;
 48 |       }
 49 | 
 50 |       #custom-grid-overlay-container div {
 51 |         opacity: 0.25;
 52 |         border: 1px solid #ffffff;
 53 |       } */
 54 | 
 55 |       /* */
 56 |       .main-container > * {
 57 |         background-color: #b5b5b5;
 58 |         padding: 20px;
 59 |       }
 60 | 
 61 |       .header-section {
 62 |         background-color: #5b5b5b;
 63 |         grid-column: 1/13;
 64 |       }
 65 | 
 66 |       .main-section {
 67 |        grid-column: 5/13;
 68 |        grid-row: 2/4;
 69 |       }
 70 |       
 71 |       .aside-section {
 72 |         grid-column: 1/5;
 73 |       }
 74 | 
 75 |       .nav-section {
 76 |         grid-column: 1/5;
 77 |       }
 78 | 
 79 |       .section {
 80 |         grid-column: 1/13;
 81 |         grid-row: 4/6;
 82 |       }
 83 | 
 84 |       .footer-section {
 85 |         background-color: #5b5b5b;
 86 |         grid-column: 1/13;
 87 |       }
 88 |     </style>
 89 | 
 90 |   </head>
 91 | 
 92 |   <body>
 93 | 
 94 |     <div class="main-container">
 95 | 
 96 |       <!-- /* 4.3.2 custom 12 columner grid */ -->
 97 |       <!-- <section id="custom-grid-overlay-container">
 98 |         <div>Column <br/> 1</div>
 99 |         <div>Column <br/> 2</div>
100 |         <div>Column <br/> 3</div>
101 |         <div>Column <br/> 4</div>
102 |         <div>Column <br/> 5</div>
103 |         <div>Column <br/> 6</div>
104 |         <div>Column <br/> 7</div>
105 |         <div>Column <br/> 8</div>
106 |         <div>Column <br/> 9</div>
107 |         <div>Column <br/> 10</div>
108 |         <div>Column <br/> 11</div>
109 |         <div>Column <br/> 12</div>
110 |       </section> -->
111 | 
112 |       <!-- Basic layout -->
113 |       <header class="header-section"><h1>Header Section</h1></header>
114 |       <main class="main-section">Main Section</main>
115 |       <aside class="aside-section">Aside Section</aside>
116 |       <nav class="nav-section">Nav Section</nav>
117 |       <section class="section">Section Section</section>
118 |       <footer class="footer-section"><small>Footer Section</small></footer>
119 |     </div>
120 |     
121 |   </body>
122 |   
123 | </html>
124 | 


--------------------------------------------------------------------------------
/_examples-css-grid/3.4.3-grid-lines-grid-column-row-layout-span.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <html lang="en">
  4 | 
  5 |   <head>
  6 |     <meta charset="UTF-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  9 |     <title>3.4.3-grid-lines-grid-column-row-layout-span.html</title>
 10 | 
 11 |     <style type="text/css">
 12 | 
 13 |       body {
 14 |         margin: 0;
 15 |         padding: 0;
 16 |         font-family: verdana;
 17 | 
 18 |         color: #ffffff;
 19 |         font-size: 1rem;
 20 |         text-align: center;
 21 |       }
 22 | 
 23 |       .main-container {
 24 |         width: 980px;
 25 |         margin: 0 auto;
 26 |       
 27 |         display: grid; /* block level grid container */
 28 |         grid-template-columns: repeat(6, 1fr);
 29 |         grid-template-rows: repeat(6, minmax(70px, auto));
 30 |         grid-gap: 20px;
 31 |       }
 32 | 
 33 |       .main-container > * {
 34 |         background-color: #ddd459;
 35 |         padding: 20px;
 36 |       }
 37 | 
 38 |       .header-section {
 39 |         background-color:#aaa459;
 40 |         /* grid-column-start: 1;
 41 |         grid-column-end: 7; */
 42 |         
 43 |         /* grid-column: 1/7; */
 44 |         
 45 |         /* grid-column: 1 / -1; */ /* Negative ie -1 is used for last-till end column/row */
 46 |         /* grid-column: span 6; */ /* cover-span 6 columns/row */
 47 |         grid-column: 1 / span 6; /* start from 1st track and cover-span 6 */
 48 |       }
 49 | 
 50 |       .main-section {
 51 |         /* grid-column-start: 2;
 52 |         grid-column-end: 6; */
 53 |         
 54 |         /* grid-column: 2/6; */
 55 | 
 56 |         grid-column: 2 / span 4;
 57 |       }
 58 |       
 59 |       .aside-section {
 60 |         /* grid-column-start: 1;
 61 |         grid-column-end: 4;
 62 | 
 63 |         grid-row-start: 3;
 64 |         grid-row-end: 5; */
 65 |         
 66 |         /* grid-column: 1/4;
 67 |         grid-row:3/5; */
 68 |         
 69 |         grid-column: 1 / span 3;
 70 |         grid-row: 3 / span 2;
 71 |       }
 72 | 
 73 |       .nav-section {
 74 |        /*  grid-column-start: 4;
 75 |         grid-column-end: 7;
 76 |         
 77 |         grid-row-start: 3;
 78 |         grid-row-end: 5; */
 79 |         
 80 |         /* grid-column: 4/7;
 81 |         grid-row: 3/5; */
 82 | 
 83 |         grid-column: 4 / span 3;
 84 |         grid-row: 3 / span 2;
 85 |       }
 86 | 
 87 |       .section {
 88 |         /* grid-column-start: 2;
 89 |         grid-column-end: 6; */
 90 |         
 91 |         /* grid-column: 2/6; */
 92 | 
 93 |         grid-column: 2 / span 4;
 94 |       }
 95 | 
 96 |       .footer-section {
 97 |         background-color:#aaa459;
 98 |         /* grid-column-start: 1;
 99 |         grid-column-end: 7; */
100 |         
101 |         /* grid-column: 1/7; */
102 | 
103 |         /* grid-column: 1 / -1; */ 
104 |         /* grid-column: span 6; */ 
105 |         
106 |         grid-column: 1 / span 6;  
107 |       }
108 |     </style>
109 | 
110 |   </head>
111 | 
112 |   <body>
113 | 
114 |     <div class="main-container">
115 |       <header class="header-section"><h1>Header Section</h1></header>
116 |       <main class="main-section">Main Section</main>
117 |       <aside class="aside-section">Aside Section</aside>
118 |       <nav class="nav-section">Nav Section</nav>
119 |       <section class="section">Section Section</section>
120 |       <footer class="footer-section"><small>Footer Section</small></footer>
121 |     </div>
122 |     
123 |   </body>
124 |   
125 | </html>
126 | 


--------------------------------------------------------------------------------
/_examples-css-grid/4.2-demo-responsive-grid-layout.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <html lang="en">
  4 | 
  5 |   <head>
  6 |     <meta charset="UTF-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  9 |     <title>4.2-demo-responsive-grid-layout.html</title>
 10 | 
 11 |     <style type="text/css">
 12 | 
 13 |       body {
 14 |         margin: 0;
 15 |         padding: 0;
 16 |         font-family: verdana;
 17 | 
 18 |         color: #ffffff;
 19 |         font-size: 1rem;
 20 |         text-align: center;
 21 |       }
 22 |       
 23 |       /* Mobile basic view is defualt, we get just after applying desktop media query */
 24 | 
 25 |       /* Mobile enhanced view */
 26 |       @media screen and (max-width: 760px) {
 27 | 
 28 |         body {
 29 |           font-size: 2rem;
 30 |         }
 31 | 
 32 |         .main-container > * {
 33 |           padding: 40px !important;
 34 |         }
 35 |         
 36 |         .main-container {
 37 |           width: 980px;
 38 |           margin: 0 auto;
 39 | 
 40 |           display: grid; /* block level grid container */
 41 |           grid-template-columns: repeat(4, 1fr);
 42 |           grid-auto-rows: minmax(100px, auto);
 43 |           grid-gap: 30px;
 44 | 
 45 |           grid-template-areas: 
 46 |             "headerArea headerArea headerArea headerArea"
 47 |             "footerArea footerArea footerArea footerArea"
 48 |             "mainArea mainArea mainArea mainArea"
 49 |             "mainArea mainArea mainArea mainArea"
 50 |             "asideArea asideArea navArea navArea"
 51 |             "sectionArea sectionArea sectionArea sectionArea"
 52 |             "sectionArea sectionArea sectionArea sectionArea";
 53 |         }
 54 |       }
 55 | 
 56 |       /* Desktop view */
 57 |       @media screen and (min-width: 760px) {
 58 | 
 59 |         .main-container {
 60 |           width: 980px;
 61 |           margin: 0 auto;
 62 | 
 63 |           display: grid; /* block level grid container */
 64 |           grid-template-columns: repeat(4, 1fr);
 65 |           grid-auto-rows: minmax(80px, auto);
 66 |           grid-gap: 20px;
 67 | 
 68 |           grid-template-areas: 
 69 |             "headerArea headerArea headerArea headerArea"
 70 |             "asideArea asideArea mainArea mainArea "
 71 |             "navArea navArea mainArea mainArea "
 72 |             "sectionArea sectionArea sectionArea sectionArea"
 73 |             "sectionArea sectionArea sectionArea sectionArea"
 74 |             "footerArea footerArea footerArea footerArea";
 75 |         }
 76 |       }
 77 | 
 78 |       .main-container > * {
 79 |         background-color: #00bcd4;
 80 |         padding: 20px;
 81 |       }
 82 | 
 83 |       .header-section {
 84 |         grid-area: headerArea;
 85 |         background-color: #0199ad;
 86 |       }
 87 | 
 88 |       .main-section {
 89 |         grid-area: mainArea;
 90 |       }
 91 | 
 92 |       .section {
 93 |         grid-area: sectionArea;
 94 |       }
 95 | 
 96 |       .aside-section {
 97 |         grid-area: asideArea;
 98 |       }
 99 | 
100 |       .nav-section {
101 |         grid-area: navArea;
102 |       }
103 | 
104 |       .footer-section {
105 |         grid-area: footerArea;
106 |         background-color: #0199ad;
107 |       }
108 |     </style>
109 | 
110 |   </head>
111 | 
112 |   <body>
113 | 
114 |     <div class="main-container">
115 |       <header class="header-section"><h1>Header Section</h1></header>
116 |       <main class="main-section">Main Section</main>
117 |       <section class="section">Section Section</section>
118 |       <aside class="aside-section">Aside Section</aside>
119 |       <nav class="nav-section">Nav Section</nav>
120 |       <footer class="footer-section"><small>Footer Section</small></footer>
121 |     </div>
122 |     
123 |   </body>
124 |   
125 | </html>
126 | 


--------------------------------------------------------------------------------
/_examples-css-grid/3.4.4-grid-lines-grid-column-row-layout-span.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <html lang="en">
  4 | 
  5 |   <head>
  6 |     <meta charset="UTF-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  9 |     <title>3.4.4-grid-lines-grid-column-row-layout-span.html</title>
 10 | 
 11 |     <style type="text/css">
 12 | 
 13 |       body {
 14 |         margin: 0;
 15 |         padding: 0;
 16 |         font-family: verdana;
 17 | 
 18 |         color: #ffffff;
 19 |         font-size: 1rem;
 20 |         text-align: center;
 21 |       }
 22 | 
 23 |       .main-container {
 24 |         width: 980px;
 25 |         margin: 0 auto;
 26 |       
 27 |         display: grid; /* block level grid container */
 28 |         grid-template-columns: repeat(4, 1fr 1fr);
 29 |         grid-template-rows: repeat(10, 60px);
 30 |         grid-gap: 10px;
 31 |       }
 32 | 
 33 |       .main-container > * {
 34 |         background-color:#00bfff;
 35 |         padding: 20px;
 36 |         border: 2px solid #0000004f;
 37 |       }
 38 | 
 39 |       .item {
 40 |         /* display: grid;
 41 |         justify-content: center;
 42 |         align-items: center; */
 43 |       }
 44 | 
 45 |       .item1 {
 46 |         /* grid-column: 2 / 4; */
 47 |         grid-column: 2 / span 2;
 48 |       }
 49 | 
 50 |       .item2 {
 51 |         /* grid-column: 4 / -1; */
 52 |         grid-column: 4 / span 5;
 53 |       }
 54 | 
 55 |       .item3, .item4 {
 56 |         grid-column: span 2;
 57 |         grid-row: span 2;
 58 |       }
 59 | 
 60 |       .item6, .item8 {
 61 |         grid-row: span 2;
 62 |       }
 63 | 
 64 |       .item11 {
 65 |         grid-column: 1 / -1;
 66 |         /* grid-column: 1 / span 8; */
 67 |       }
 68 | 
 69 |       .item12, .item14  {
 70 |         grid-column: span 3;
 71 |         grid-row: span 3;
 72 |       }
 73 | 
 74 |       .item13, .item15  {
 75 |         grid-row: span 3;
 76 |       }
 77 | 
 78 |       .item16, .item17 {
 79 |         grid-column: span 4;
 80 |       }
 81 | 
 82 |       .item18 {
 83 |         grid-column: 2 / span 6;
 84 |       }
 85 | 
 86 |       .item19 {
 87 |         grid-column: 1 / span 8;
 88 |       }
 89 | 
 90 |     </style>
 91 | 
 92 |   </head>
 93 | 
 94 |   <body>
 95 | 
 96 |     <div class="main-container">
 97 |       <div class="item item1">Item 1 LOGO </div>
 98 |       <div class="item item2">Item 2 NAVIGATION BAR </div>
 99 |       <div class="item item3">Item 3</div>
100 |       <div class="item item4">Item 4</div>
101 |       <div class="item item5">Item 5</div>
102 |       <div class="item item6">Item 6</div>
103 |       <div class="item item7">Item 7</div>
104 |       <div class="item item8">Item 8</div>
105 |       <div class="item item9">Item 9</div>
106 |       <div class="item item10">Item 10</div>
107 |       <div class="item item11">Item 11</div>
108 |       <div class="item item12">Item 12</div>
109 |       <div class="item item13">Item 13</div>
110 |       <div class="item item14">Item 14</div>
111 |       <div class="item item15">Item 15</div>
112 |       <div class="item item16">Item 16</div>
113 |       <div class="item item17">Item 17</div>
114 |       <div class="item item18">Item 18</div>
115 |       <div class="item item19">Item 19</div>
116 |       <div class="item item20">Item 20</div>
117 |       <div class="item item21">Item 21</div>
118 |       <div class="item item22">Item 22</div>
119 |       <div class="item item23">Item 23</div>
120 |       <div class="item item24">Item 24</div>
121 |       <div class="item item25">Item 25</div>
122 |       <div class="item item26">Item 26</div>
123 |       <div class="item item27">Item 27</div>
124 |       <div class="item item28">Item 28</div>
125 |       <div class="item item29">Item 29</div>
126 |       <div class="item item30">Item 30</div>
127 |     </div>
128 |     
129 |   </body>
130 |   
131 | </html>
132 | 


--------------------------------------------------------------------------------
/_examples-css-grid/4.4-demo-grid-auto-flow-dense.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <html lang="en">
  4 | 
  5 |   <head>
  6 |     <meta charset="UTF-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  9 |     <title>4.4-demo-grid-auto-flow-dense.html</title>
 10 | 
 11 |     <style type="text/css">
 12 | 
 13 |       body {
 14 |         margin: 0;
 15 |         padding: 0;
 16 |         font-family: verdana;
 17 | 
 18 |         color: #ffffff;
 19 |         font-size: 1rem;
 20 |         text-align: center;
 21 |       }
 22 | 
 23 |       .main-container {
 24 |         width: 960px;
 25 |         margin: 0 auto;
 26 |       
 27 |         display: grid;
 28 |         grid-template-columns: repeat(10, 1fr);
 29 |         grid-gap: 10px;
 30 |         
 31 |         /* 4.4.2 - */
 32 |         /* grid-auto-flow: dense; */
 33 |       }
 34 | 
 35 |       .item:nth-child(6n) {
 36 |         background-color:#a9a906;
 37 |         
 38 |         /* 4.4.1 - right side every 6th column should cover span remaining space */
 39 |         grid-column: span 5;
 40 |         
 41 |         /* 4.4.2 - */
 42 |         /* grid-column: span 6; */
 43 |       }
 44 | 
 45 |       .main-container > * {
 46 |         background-color: #dcdc65;
 47 |         padding: 20px;
 48 |       }
 49 |     </style>
 50 | 
 51 |   </head>
 52 | 
 53 |   <body>
 54 | 
 55 |     <div class="main-container">
 56 | 
 57 |       <div class="item item1">1</div>
 58 |       <div class="item item2">2</div>
 59 |       <div class="item item3">3</div>
 60 |       <div class="item item4">4</div>
 61 |       <div class="item item5">5</div>
 62 |       <div class="item item6">6</div>
 63 |       <div class="item item7">7</div>
 64 |       <div class="item item8">8</div>
 65 |       <div class="item item9">9</div>
 66 |       <div class="item item10">10</div>
 67 |       <div class="item item11">11</div>
 68 |       <div class="item item12">12</div>
 69 |       <div class="item item13">13</div>
 70 |       <div class="item item14">14</div>
 71 |       <div class="item item15">15</div>
 72 |       <div class="item item16">16</div>
 73 |       <div class="item item17">17</div>
 74 |       <div class="item item18">18</div>
 75 |       <div class="item item19">19</div>
 76 |       <div class="item item20">20</div>
 77 |       <div class="item item21">21</div>
 78 |       <div class="item item22">22</div>
 79 |       <div class="item item23">23</div>
 80 |       <div class="item item24">24</div>
 81 |       <div class="item item25">25</div>
 82 |       <div class="item item26">26</div>
 83 |       <div class="item item27">27</div>
 84 |       <div class="item item28">28</div>
 85 |       <div class="item item29">29</div>
 86 |       <div class="item item30">30</div>
 87 |       <div class="item item31">31</div>
 88 |       <div class="item item32">32</div>
 89 |       <div class="item item33">33</div>
 90 |       <div class="item item34">34</div>
 91 |       <div class="item item35">35</div>
 92 |       <div class="item item36">36</div>
 93 |       <div class="item item37">37</div>
 94 |       <div class="item item38">38</div>
 95 |       <div class="item item39">39</div>
 96 |       <div class="item item40">40</div>
 97 |       <div class="item item41">41</div>
 98 |       <div class="item item42">42</div>
 99 |       <div class="item item43">43</div>
100 |       <div class="item item44">44</div>
101 |       <div class="item item45">45</div>
102 |       <div class="item item46">46</div>
103 |       <div class="item item47">47</div>
104 |       <div class="item item48">48</div>
105 |       <div class="item item49">49</div>
106 |       <div class="item item50">50</div>
107 |       <div class="item item51">51</div>
108 |       <div class="item item52">52</div>
109 |       <div class="item item53">53</div>
110 |       <div class="item item54">54</div>
111 |       <div class="item item55">55</div>
112 |       <div class="item item56">56</div>
113 |       <div class="item item57">57</div>
114 |       <div class="item item58">58</div>
115 |       <div class="item item59">59</div>
116 |       <div class="item item60">60</div>
117 |     
118 |   </body>
119 |   
120 | </html>
121 | 


--------------------------------------------------------------------------------
/_examples-css-grid/4.5-demo-grid-card-layout.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <html lang="en">
  4 | 
  5 |   <head>
  6 |     <meta charset="UTF-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  9 |     <title>4.5-demo-grid-card-layout.html</title>
 10 | 
 11 |     <style type="text/css">
 12 | 
 13 |       body {
 14 |         margin: 0;
 15 |         padding: 0;
 16 |         font-family: verdana;
 17 |       }
 18 | 
 19 |       .main-container {
 20 |         width: 960px;
 21 |         margin: 0 auto;
 22 | 
 23 |         display: grid;
 24 |         grid-template-columns: repeat(4, 1fr);
 25 |         /* grid-auto-rows: minmax(300px, auto); */
 26 |         grid-gap: 10px;
 27 |       }
 28 | 
 29 |       .card {
 30 |         color: #000000;
 31 |         border: 2px solid #000000;
 32 |         font-size: 1rem;
 33 |         padding: 1rem;
 34 |         text-align: left;
 35 |       }
 36 | 
 37 |       .card .logo-holder{
 38 |         background-color: #ffdab9;
 39 |         height: 5em;
 40 |         margin-bottom: 1em;
 41 |       }
 42 | 
 43 |       .card .header{
 44 |         color: #ffb470;
 45 |         font-size: 1.25em;
 46 |         font-weight: bold;
 47 |         margin-bottom: 0.5em;
 48 |       }
 49 | 
 50 |       .card .article{
 51 |         color:#ddb470;
 52 |         font-size: 0.75em;
 53 |       }
 54 | 
 55 |       .card2 .logo-holder{
 56 |         height: 7em;
 57 |       }
 58 | 
 59 |       .card3 .logo-holder{
 60 |         height: 9em;
 61 |       }
 62 | 
 63 |       .card4 .logo-holder{
 64 |         height: 11em;
 65 |       }
 66 | 
 67 |       .card6 .logo-holder, .card7 .logo-holder{
 68 |         height: 9em;
 69 |       }
 70 |     </style>
 71 | 
 72 |   </head>
 73 | 
 74 |   <body>
 75 | 
 76 |     <div class="main-container">
 77 | 
 78 |       <div class="card card1">
 79 |         <section class="logo-holder"></section>
 80 |         <header class="header">Card1 Heading</header>
 81 |         <article class="article">
 82 |           This is dummy teaser text.
 83 |         </article>
 84 |       </div>
 85 | 
 86 |       <div class="card card2">
 87 |         <section class="logo-holder"></section>
 88 |         <header class="header">Card2 Headline Logo content</header>
 89 |         <article class="article">
 90 |           This is dummy teaser text. It may varies card to card.
 91 |         </article>
 92 |       </div>
 93 | 
 94 |       <div class="card card3">
 95 |         <section class="logo-holder"></section>
 96 |         <header class="header">Card3 Heading</header>
 97 |         <article class="article">
 98 |           This is dummy teaser text. It may varies card to card. This is dummy teaser text.
 99 |         </article>
100 |       </div>
101 | 
102 |       <div class="card card4">
103 |         <section class="logo-holder"></section>
104 |         <header class="header">Card4 Heading</header>
105 |         <article class="article">
106 |           This is dummy teaser text. It may varies card to card. 
107 |           This is dummy teaser text. It may varies card to card.
108 |         </article>
109 |       </div>
110 | 
111 |       <div class="card card5">
112 |         <section class="logo-holder"></section>
113 |         <header class="header">Card5 Heading & Logo Wrapper</header>
114 |         <article class="article">
115 |           This is dummy teaser text. It may varies card to card. 
116 |           This is dummy teaser text. It may varies card to card.  
117 |           This is dummy teaser text. 
118 |         </article>
119 |       </div>
120 | 
121 |       <div class="card card6">
122 |         <section class="logo-holder"></section>
123 |         <header class="header">Card6 Heading</header>
124 |         <article class="article">
125 |           This is dummy teaser text. It may varies card to card. 
126 |           This is dummy teaser text. It may varies card to card. 
127 |           This is dummy teaser text. It may varies card to card.
128 |         </article>
129 |       </div>
130 | 
131 |       <div class="card card7">
132 |         <section class="logo-holder"></section>
133 |         <header class="header">Card7 Heading</header>
134 |         <article class="article">
135 |           This is dummy teaser text. It may varies card to card. 
136 |           This is dummy teaser text. It may varies card to card. 
137 |           This is dummy teaser text. It may varies card to card. 
138 |           This is dummy teaser text. 
139 |         </article>
140 |       </div>
141 | 
142 |       <div class="card card8"><section class="logo-holder"></section>
143 |         <header class="header">Card8 Heading</header>
144 |         <article class="article">
145 |           This is dummy teaser text. It may varies card to card.
146 |           This is dummy teaser text. It may varies card to card.
147 |           This is dummy teaser text. It may varies card to card.
148 |           This is dummy teaser text. It may varies card to card.
149 |         </article>
150 |       </div>
151 | 
152 |     </div>
153 |     
154 |   </body>
155 |   
156 | </html>
157 | 


--------------------------------------------------------------------------------