dimensions-011-print-ref.html (1493B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <meta name="flags" content="ahem"> 4 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 5 <style> 6 :root { 7 print-color-adjust: exact; 8 font: 16px/1 Ahem; 9 } 10 @page { 11 size: 32em 28em; 12 margin: 0; 13 } 14 body { 15 margin: 0; 16 } 17 .grid { 18 display: grid; 19 grid-template-columns: 6em auto 6em; 20 grid-template-rows: 6em auto 6em; 21 height: 100vh; 22 } 23 .vertical-edge { 24 display: flex; 25 } 26 .horizontal-edge { 27 display: flex; 28 flex-flow: column; 29 } 30 </style> 31 <div class="grid"> 32 <div class="corner"></div> 33 <div class="vertical-edge"> 34 <div style="margin-top:20px; margin-bottom:auto; width:4em; background:hotpink;">x</div> 35 <div style="margin-top:40px; margin-bottom:auto; width:12em; background:cyan;">xxxxx</div> 36 <div style="margin-top:60px; margin-bottom:auto; width:4em; background:yellow;">x</div> 37 </div> 38 <div class="corner"></div> 39 <div class="horizontal-edge"></div> 40 <div></div> 41 <div class="horizontal-edge"></div> 42 <div class="corner"></div> 43 <div class="vertical-edge"> 44 <div style="margin-top:20px; margin-bottom:auto; width:7.5em; background:yellow;">xxxxxx</div> 45 <div style="margin-top:40px; margin-bottom:auto; width:5em; background:cyan;">xxxx</div> 46 <div style="margin-top:60px; margin-bottom:auto; margin-left: auto; width:2em; background:hotpink;">x</div> 47 </div> 48 <div class="corner"></div> 49 </div>