grid-block-axis-alignment-auto-margins-007.html (1467B)
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's height changes."> 7 <style> 8 #grid { 9 display: grid; 10 position: relative; 11 background: grey; 12 grid-template-rows: 40% 60%; 13 height: 500px; 14 width: 200px; 15 } 16 #grid div { 17 margin: auto 0px auto 0px; 18 } 19 #item1 { 20 background: green; 21 width: 25px; 22 height: 50px; 23 } 24 #item2 { 25 background: blue; 26 width: 25px; 27 height: 100px; 28 } 29 </style> 30 <script src="/resources/testharness.js"></script> 31 <script src="/resources/testharnessreport.js"></script> 32 <script src="/resources/check-layout-th.js"></script> 33 <div id="grid"> 34 <div id="item1"></div> 35 <div id="item2"></div> 36 </div> 37 <script> 38 setup({ explicit_done: true }); 39 document.fonts.ready.then(() => { 40 item1.setAttribute("data-offset-y", "75"); 41 item2.setAttribute("data-offset-y", "300"); 42 checkLayout('#grid', false); 43 44 grid.style.height = "300px"; 45 46 item1.setAttribute("data-offset-y", "35"); 47 item2.setAttribute("data-offset-y", "160"); 48 checkLayout('#grid', true); 49 }); 50 </script>