<!DOCTYPE HTML> <!-- Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ --> <html><head> <meta charset="utf-8"> <title>Reference: 'grid-column-gap' percentage</title> <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1279182"> <style> html,body { color:black; background-color:white; font-size:1px; padding:0; margin:0; } .grid { display: grid; grid-template-columns: 30px 30px; border: 1px solid; } .inline-grid { display: inline-grid; grid: 120px / 160px; border: 1px solid; } .float { float:left; border: 2px solid blue; } .percentgap { grid-gap: 24px 32px; } span:nth-of-type(1) { background: magenta; } span:nth-of-type(2) { background: cyan; } span:nth-of-type(3) { background: yellow; } span:nth-of-type(4) { background: lime; } x { display: block; width: 20px; height: 30px; } br { clear: both; } </style> </head> <body> <div class="inline-grid"> <div class="grid percentgap"> <span><x></x></span> <span><x></x></span> <span><x></x></span> <span><x></x></span> </div> </div> <div class="inline-grid" style="grid: auto / auto"> <div class="grid percentgap" style="align-self:start; justify-self:start; width:160px; height:120px"> <span><x></x></span> <span><x></x></span> <span><x></x></span> <span><x></x></span> </div> </div> <div class="float"> <div class="grid" style="align-self:start; justify-self:start; grid-gap:15px"> <span><x></x></span> <span><x></x></span> <span><x></x></span> <span><x></x></span> </div> </div> <div class="inline-grid"> <div class="grid" style="align-self:start; justify-self:start; grid-gap:15px"> <span><x></x></span> <span><x></x></span> <span><x></x></span> <span><x></x></span> </div> </div> <br> <div style="width:320px;height:200px"> <div class="grid percentgap" style="height:120px; grid-column-gap:64px"> <span><x></x></span> <span><x></x></span> <span><x></x></span> <span><x></x></span> </div> </div> <!-- TODO: fails on Windows 8 x64 Opt <div class="inline-grid"> <div class="grid percentgap"> <span><x></x></span> <span><x></x></span> <span><x></x></span> <span><x></x></span> </div> </div> --> <div class="inline-grid" style="grid: auto / auto"> <div class="grid percentgap" style="align-self:start; justify-self:start; width:160px; height:120px"> <span><x></x></span> <span><x></x></span> <span><x></x></span> <span><x></x></span> </div> </div> <div class="inline-grid"> <div class="grid" style="grid: min-content 20% min-content / min-content 20% min-content"> <span><x></x></span><z></z><span><x></x></span> <z></z><z></z><z></z> <span><x></x></span><z></z><span><x></x></span> </div> </div> <br> <div style="width:320px;height:200px"> <div class="grid percentgap" style="height:120px; grid-column-gap:64px"> <span><x></x></span> <span><x></x></span> <span><x></x></span> <span><x></x></span> </div> </div> <div style="width:320px;height:200px"> <div class="grid calcgap" style="height:120px; grid-gap:0"> <span><x></x></span> <span><x></x></span> <span><x></x></span> <span><x></x></span> </div> </div> <div class="float" style="margin-top:-50px"> <div class="grid" style="min-width:300%; grid-gap:15px 15px"> <span><x></x></span> <span style="margin-left:31px; width:30px"><x></x></span> <span><x></x></span> <span style="margin-left:31px; width:30px"><x></x></span> </div> </div> </body> </html>