grid.html (896B)
1 <!-- Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ --> 3 <!DOCTYPE html> 4 <html> 5 <head> 6 <meta charset="utf-8"/> 7 <title>Grid test page</title> 8 <style type='text/css'> 9 #grid { 10 display: grid; 11 grid-template-columns: [col-1 col-start-1] 100px [col-2] 100px; 12 grid-template-rows: 100px 100px; 13 grid-template-areas: ". header" 14 "sidebar content"; 15 } 16 #cell1 { 17 grid-column: 1; 18 grid-row: 1; 19 } 20 #cell2 { 21 grid-column: 2; 22 grid-row: 1; 23 } 24 #cell3 { 25 grid-column: 1; 26 grid-row: 2; 27 } 28 #cell4 { 29 grid-column: 2; 30 grid-row: 2; 31 } 32 </style> 33 </head> 34 <body> 35 <div id="grid"> 36 <div id="cell1">cell1</div> 37 <div id="cell2">cell2</div> 38 <div id="cell3">cell3</div> 39 <div id="cell4">cell4</div> 40 </div> 41 </body> 42 </html>