grid-block-axis-alignment-auto-margins-006.html (1520B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title> 4 <link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> 5 <link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins"> 6 <meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid item's height changes."> 7 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 8 <style> 9 #grid { 10 display: grid; 11 position: relative; 12 background: grey; 13 font: 10px/1 Ahem; 14 grid-template-columns: 100px; 15 grid-template-rows: 40% 60%; 16 height: 500px; 17 width: 300px; 18 } 19 #grid div { 20 margin: auto 0px auto 0px; 21 } 22 #item1 { 23 color: green; 24 } 25 #item2 { 26 color: blue; 27 } 28 </style> 29 <script src="/resources/testharness.js"></script> 30 <script src="/resources/testharnessreport.js"></script> 31 <script src="/resources/check-layout-th.js"></script> 32 <div id="grid"> 33 <div id="item1">XXXXX</div> 34 <div id="item2">XXXXX</div> 35 </div> 36 <script> 37 setup({ explicit_done: true }); 38 document.fonts.ready.then(() => { 39 item1.setAttribute("data-offset-y", "95"); 40 item2.setAttribute("data-offset-y", "345"); 41 checkLayout('#grid', false); 42 43 grid.style.fontSize = "40px"; 44 45 item1.setAttribute("data-offset-y", "80"); 46 item2.setAttribute("data-offset-y", "330"); 47 checkLayout('#grid', true); 48 }); 49 </script>