| <!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: subgrid margin/border/padding that overflow the edge track</title> |
| <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> |
| <style> |
| html,body { |
| color:black; background-color:white; font:16px/1 monospace; margin:0; padding:0; |
| } |
| |
| .grid { |
| display: inline-grid; |
| grid: auto / 7px 30px 10px 20px 5px; |
| justify-content: space-around; |
| align-content: start; |
| border: 3px solid; |
| width: 80px; |
| } |
| .rtl { direction: rtl; } |
| |
| .subgrid { |
| display: grid; |
| min-width: 0; |
| min-height: 30px; |
| background: pink; |
| border:1px solid; |
| margin: 0 4px 0 3px; |
| position: relative; |
| justify-content: space-between; |
| } |
| .c1 { width: 30px; grid-column: 2 / span 1; grid: auto / 26px; } |
| .rtl > .c1 { grid: auto / 25px; } |
| .c1.plr { padding-right: 100px; } |
| .rtl > .c1.plr { padding: 0 0 0 100px; } |
| |
| .c2 { width: 33px; grid-column: 2 / span 2; grid: auto / 26px 5px; } |
| .rtl > .c2 { grid: auto / 25px 6px; } |
| .c2.plr { padding-right: 97px; } |
| .rtl > .c2.plr { padding: 0 0 0 97px; } |
| |
| .c3 { width: 55px; grid-column: 2 / span 3; grid: auto / 26px 10px 15px; } |
| .rtl > .c3 { grid: auto / 25px 10px 16px; } |
| .c3.plr { padding-right: 75px; } |
| .rtl > .c3.plr { padding: 0 0 0 75px; } |
| |
| y { |
| background: blue; |
| height: 10px; |
| } |
| y:nth-of-type(1) { grid-column: 2; } |
| y:nth-of-type(2) { grid-column: 4; } |
| |
| x { background: silver; } |
| x:nth-of-type(2) { background: purple; } |
| x:nth-of-type(3) { background: magenta; } |
| |
| a { |
| position: absolute; |
| grid-column-start: 1; |
| inset: 0; |
| top: 3px; |
| border-top: 2px solid grey; |
| } |
| a:nth-of-type(2) { |
| grid-column-start: 2; |
| top: 6px; |
| } |
| a:nth-of-type(3) { |
| grid-column-start: 3; |
| top: 9px; |
| } |
| |
| b { |
| position: absolute; |
| grid-column-end: 1; |
| inset: 0; |
| top: 12px; |
| border-top: 2px solid grey; |
| } |
| b:nth-of-type(2) { |
| grid-column-end: 2; |
| top: 15px; |
| } |
| b:nth-of-type(3) { |
| grid-column-end: 3; |
| top: 18px; |
| } |
| |
| .f { float:left; margin-left:80px; } |
| .z { height:0; } |
| .s2 { grid-column:2; } |
| .gl { left: -2px; } |
| .e2 { grid-column-end:2; } |
| .gr { right: -2px; } |
| </style> |
| </head> |
| <body> |
| |
| <div class=f> |
| <div class="grid"> |
| <y></y><y></y> |
| <div class="subgrid c3 pr"><x></x><a></a><b></b><x></x><a></a><b></b><a></a><b></b></div> |
| </div> |
| |
| <br> |
| |
| <div class="grid"> |
| <y></y><y></y> |
| <div class="subgrid c3 pl"><x class="z"></x><a class="s2 gl"></a><b class="e2"></b><x></x><a></a><b></b><x></x><a></a><b></b></div> |
| </div> |
| |
| <br> |
| |
| <div class="grid"> |
| <y></y><y></y> |
| <div class="subgrid c3 plr"><x class="z"></x><a class="s2 gl"></a><b class="e2"></b><x></x><a></a><b></b><x class="z"></x><a></a><b></b></div> |
| </div> |
| |
| <br> |
| |
| <div class="grid rtl"> |
| <y></y><y></y> |
| <div class="subgrid c3 pr"><x class="z"></x><a class="s2 gr"></a><b class="e2"></b><x></x><a></a><b></b><x></x><a></a><b></b></div> |
| </div> |
| |
| <br> |
| |
| <div class="grid rtl"> |
| <y></y><y></y> |
| <div class="subgrid c3 pl"><x></x><a></a><b></b><x></x><a></a><b></b><x class="z"></x><a></a><b></b></div> |
| </div> |
| |
| <br> |
| |
| <div class="grid rtl"> |
| <y></y><y></y> |
| <div class="subgrid c3 plr"><x class="z"></x><a class="s2 gr"></a><b class="e2"></b><x></x><a></a><b></b><x class="z"></x><a></a><b></b></div> |
| </div> |
| |
| </div> |
| |
| <div class=f> |
| <div class="grid"> |
| <y></y><y></y> |
| <div class="subgrid c2 pr"><x></x><a></a><b></b><x class="z"></x><a></a><b></b></div> |
| </div> |
| |
| <br> |
| |
| <div class="grid"> |
| <y></y><y></y> |
| <div class="subgrid c2 pl"><x class="z"></x><a class="s2 gl"></a><b class="e2"></b><x></x><a></a><b></b></div> |
| </div> |
| |
| <br> |
| |
| <div class="grid"> |
| <y></y><y></y> |
| <div class="subgrid c2 plr"><a class="s2 gl"></a><b class="e2"></b><a></a><b></b></div> |
| </div> |
| |
| <br> |
| |
| <div class="grid rtl"> |
| <y></y><y></y> |
| <div class="subgrid c2 pr"><x class="z"></x><a class="s2 gr"></a><b class="e2"></b><x></x><a></a><b></b></div> |
| </div> |
| |
| <br> |
| |
| <div class="grid rtl"> |
| <y></y><y></y> |
| <div class="subgrid c2 pl"><x></x><a></a><b></b><x class="z"></x><a></a><b></b></div> |
| </div> |
| |
| <br> |
| |
| <div class="grid rtl"> |
| <y></y><y></y> |
| <div class="subgrid c2 plr"><a class="s2 gr"></a><b class="e2"></b><a></a><b></b></div> |
| </div> |
| |
| </div> |
| |
| <div class=f> |
| <div class="grid"> |
| <y></y><y></y> |
| <div class="subgrid c1 pr"><a></a><b></b></div> |
| </div> |
| |
| <br> |
| |
| <div class="grid"> |
| <y></y><y></y> |
| <div class="subgrid c1 pl"><a class="s2"></a><b class="e2"></b></div> |
| </div> |
| |
| <br> |
| |
| <div class="grid"> |
| <y></y><y></y> |
| <div class="subgrid c1 plr"><a class="s2"></a><b class="e2"></b></div> |
| </div> |
| |
| <br> |
| |
| <div class="grid rtl"> |
| <y></y><y></y> |
| <div class="subgrid c1 pr"><a class="s2"></a><b class="e2"></b></div> |
| </div> |
| |
| <br> |
| |
| <div class="grid rtl"> |
| <y></y><y></y> |
| <div class="subgrid c1 pl"><a></a><b></b></div> |
| </div> |
| |
| <br> |
| |
| <div class="grid rtl"> |
| <y></y><y></y> |
| <div class="subgrid c1 plr"><a class="s2"></a><b class="e2"></b></div> |
| </div> |
| |
| </div> |
| |
| </body> |
| </html> |
