grid-inline-axis-alignment-auto-margins-003.html (1511B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</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 'left' and 'right' margins must be recomputed whenever the grid items's width changes."> 7 <style> 8 #grid { 9 display: grid; 10 position: relative; 11 background: grey; 12 grid-template-columns: 40% 60%; 13 grid-template-rows: 300px; 14 height: 400px; 15 width: 500px; 16 } 17 #grid div { 18 margin: 0px auto 0px auto; 19 } 20 #item1 { 21 background: green; 22 width: 50px; 23 height: 25px; 24 } 25 #item2 { 26 background: blue; 27 width: 100px; 28 height: 25px; 29 } 30 </style> 31 <script src="/resources/testharness.js"></script> 32 <script src="/resources/testharnessreport.js"></script> 33 <script src="/resources/check-layout-th.js"></script> 34 <div id="grid"> 35 <div id="item1"></div> 36 <div id="item2"></div> 37 </div> 38 <script> 39 setup({ explicit_done: true }); 40 document.fonts.ready.then(() => { 41 item1.setAttribute("data-offset-x", "75"); 42 item2.setAttribute("data-offset-x", "300"); 43 checkLayout('#grid', false); 44 45 item1.style.width = "100px"; 46 47 item1.setAttribute("data-offset-x", "50"); 48 item2.setAttribute("data-offset-x", "300"); 49 checkLayout('#grid', true); 50 }); 51 </script>