auto-margins-002-print-ref.html (1522B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <style> 4 @page { 5 margin: 0; 6 size: 500px 440px; 7 } 8 :root { 9 print-color-adjust: exact; 10 } 11 body { 12 display: grid; 13 grid-template-columns: 100px auto 100px; 14 grid-template-rows: 100px auto 100px; 15 height: 100vh; 16 margin: 0; 17 } 18 .square { 19 box-sizing: border-box; 20 width: 100px; 21 border: solid; 22 flex: 1; 23 background: green; 24 } 25 .vertical-edge { 26 display: flex; 27 justify-content: space-between; 28 } 29 .horizontal-edge { 30 display: flex; 31 flex-flow: column; 32 justify-content: space-between; 33 } 34 .pagearea { 35 border: solid; 36 padding: 8px; 37 } 38 </style> 39 40 <div class="square"></div> 41 <div class="vertical-edge"> 42 <div class="square"></div> 43 <div class="square"></div> 44 <div class="square"></div> 45 </div> 46 <div class="square"></div> 47 <div class="horizontal-edge"> 48 <div class="square"></div> 49 <div class="square"></div> 50 <div class="square"></div> 51 </div> 52 <div class="pagearea"> 53 There should be 16 margin boxes around this page area. They should take up all 54 available space, and there should be no red, only green rectangles with a 55 black border. 56 </div> 57 <div class="horizontal-edge"> 58 <div class="square"></div> 59 <div class="square"></div> 60 <div class="square"></div> 61 </div> 62 <div class="square"></div> 63 <div class="vertical-edge"> 64 <div class="square"></div> 65 <div class="square"></div> 66 <div class="square"></div> 67 </div> 68 <div class="square"></div>