writing-directions-003.html (2439B)
1 <!DOCTYPE HTML> 2 <html><head> 3 <meta charset="utf-8"> 4 <title>CSS Grid Test: out-of-flow subgridded items properly map repetitions</title> 5 <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com"> 6 <link rel="help" href="https://drafts.csswg.org/css-grid-2"> 7 <link rel="match" href="writing-directions-003-ref.html"> 8 <style> 9 10 .grid { 11 display: grid; 12 grid-template: repeat(5, 10px) repeat(5, 10px) / repeat(5, 10px) repeat(5, 10px); 13 width: 100px; 14 height: 100px; 15 border: 1px solid; 16 background: grey; 17 } 18 19 .subgrid { 20 position: relative; 21 display: grid; 22 grid-template: subgrid / subgrid; 23 grid-column: span 10; 24 grid-row: span 10; 25 } 26 27 .grid-item { 28 width: 10px; 29 height: 10px; 30 background: orange; 31 border: 1px solid; 32 position: absolute; 33 } 34 35 .rtl { direction:rtl; } 36 37 .ltr { direction:ltr; } 38 39 </style> 40 </head> 41 <body> 42 43 <div class="grid"> 44 <div class="subgrid rtl"> 45 <div class="grid-item" style="grid-column: 10; grid-row: 10;"></div> 46 <div class="grid-item" style="grid-column: 9; grid-row: 9;"></div> 47 <div class="grid-item" style="grid-column: 8; grid-row: 8;"></div> 48 <div class="grid-item" style="grid-column: 7; grid-row: 7;"></div> 49 <div class="grid-item" style="grid-column: 6; grid-row: 6;"></div> 50 <div class="grid-item" style="grid-column: 5; grid-row: 5;"></div> 51 <div class="grid-item" style="grid-column: 4; grid-row: 4;"></div> 52 <div class="grid-item" style="grid-column: 3; grid-row: 3;"></div> 53 <div class="grid-item" style="grid-column: 2; grid-row: 2;"></div> 54 <div class="grid-item" style="grid-column: 1; grid-row: 1;"></div> 55 </div> 56 </div> 57 58 <div class="grid rtl"> 59 <div class="subgrid ltr"> 60 <div class="grid-item" style="grid-column: 10; grid-row: 10;"></div> 61 <div class="grid-item" style="grid-column: 9; grid-row: 9;"></div> 62 <div class="grid-item" style="grid-column: 8; grid-row: 8;"></div> 63 <div class="grid-item" style="grid-column: 7; grid-row: 7;"></div> 64 <div class="grid-item" style="grid-column: 6; grid-row: 6;"></div> 65 <div class="grid-item" style="grid-column: 5; grid-row: 5;"></div> 66 <div class="grid-item" style="grid-column: 4; grid-row: 4;"></div> 67 <div class="grid-item" style="grid-column: 3; grid-row: 3;"></div> 68 <div class="grid-item" style="grid-column: 2; grid-row: 2;"></div> 69 <div class="grid-item" style="grid-column: 1; grid-row: 1;"></div> 70 </div> 71 </div> 72 73 </body> 74 </html>