grid-calc-margin.html (604B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="author" title="Sam Weinig" href="mailto:sam@webkit.org"> 5 <link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=301873"> 6 <link rel="match" href="grid-calc-margin-ref.html"> 7 <style> 8 .cardStack { 9 display: grid; 10 width: 100px; 11 } 12 .card { 13 height: 100px; 14 } 15 #card1 { 16 background-color: lightpink; 17 margin-top: calc(50% - 0px); 18 } 19 #card2 { 20 background-color: lightgreen; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="cardStack"> 26 <div id="card1" class="card"></div> 27 <div id="card2" class="card"></div> 28 </div> 29 </body> 30 </html>