writing-directions-001-ref.html (2805B)
1 <!DOCTYPE HTML> 2 <html><head> 3 <meta charset="utf-8"> 4 <title>Reference: nested subgrids map margin/border/padding according to writing direction</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 <style> 8 html,body { 9 font:12px/1 monospace; 10 } 11 12 .grid { 13 display: grid; 14 grid: 0.2em 1.4em / repeat(10, 30px); 15 border: 1px solid; 16 padding: 0 0 0 0; 17 } 18 19 div > div { 20 display: grid; 21 grid-column: 2 / span 3; 22 grid: auto / subgrid; 23 border: 1px solid; 24 background: grey; 25 } 26 27 n { 28 grid-row: 1; 29 counter-increment: n; 30 } 31 n::before { content: counter(n, decimal); } 32 33 x { 34 background: silver; 35 } 36 37 </style> 38 </head> 39 <body> 40 41 <div class="grid"> 42 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 43 <div style="grid-template-columns: subgrid; padding: 0 0 0 10px;"> 44 <div style="grid-template-columns: subgrid; grid-column: 1 /span 3; margin-right: 29px;"> 45 <x style="grid-column: 1; ">x</x> 46 </div> 47 </div> 48 </div> 49 50 <div class="grid"> 51 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 52 <div style="grid-template-columns: subgrid;"> 53 <div style="grid-template-columns: subgrid; grid-column: 1 /span 3; margin-right: 29px; padding-left: 10px;"> 54 <x style="grid-column: 1; ">x</x> 55 </div> 56 </div> 57 </div> 58 59 <div class="grid"> 60 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 61 <div style="grid-template-columns: subgrid; border-right: 20px solid; border-left: 10px solid;"> 62 <div style="grid-template-columns: subgrid; grid-column-start:span 3; margin-right: 10px;"> 63 <x style="grid-column: 1;">x</x> 64 </div> 65 </div> 66 </div> 67 68 <div class="grid"> 69 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 70 <div style="grid-template-columns: subgrid;"> 71 <div style="grid-template-columns: subgrid; grid-column-start:span 3; border-right: 20px solid; border-left: 10px solid; margin-right: 29px;"> 72 <x style="grid-column: 1;">x</x> 73 </div> 74 </div> 75 </div> 76 77 <div class="grid"> 78 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 79 <div style="grid-template-columns: subgrid; margin: 0 20px 0 0;"> 80 <div style="grid-template-columns: subgrid; grid-column-start:span 3; margin-right: 9px;"> 81 <x style="grid-column: 1;">x</x> 82 </div> 83 </div> 84 </div> 85 86 <div class="grid"> 87 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 88 <div style="grid-template-columns: subgrid;"> 89 <div style="grid-template-columns: subgrid; grid-column-start:span 3; margin: 0 20px 0 0; margin-right: 49px;"> 90 <x style="grid-column: 1;">x</x> 91 </div> 92 </div> 93 </div> 94 95 </body> 96 </html>