grid-fragmentation-030-ref.html (3970B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>Reference: Fragmentation of a height:auto, growing min-content row that makes the grid container break</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> 10 <style type="text/css"> 11 html,body { 12 color:black; background-color:white; font-size:16px; padding:0; margin:0; 13 } 14 body { overflow:hidden; } 15 16 .columns { 17 position:relative; 18 -ms-columns: 5; 19 -webkit-columns: 5; 20 columns: 5; 21 -ms-column-fill: auto; 22 -webkit-column-fill: auto; 23 column-fill: auto; 24 border: 2px solid salmon; 25 margin-bottom: 5px; 26 } 27 28 .grid { 29 display: grid; 30 max-height: 20px; 31 grid-template-columns: 30px 30px 30px; 32 grid-gap: 12px; 33 border:5px solid; 34 align-content: start; 35 } 36 span { background:lime; border:1px solid black; } 37 x { display:block; height:20px; } 38 39 i { display:block; height:10px; margin-top:7px; background:blue; } 40 </style> 41 </head> 42 <body> 43 44 <div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> 45 <div style="padding-top:1px; background:grey"> 46 <div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0;"> 47 <span></span> 48 <span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> 49 <span style="grid-row:2;"><x></x></span> 50 </div> 51 </div></div> 52 53 <div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> 54 <div style="padding-top:1px; background:grey"> 55 <div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0; max-height:90px;"> 56 <span></span> 57 <span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> 58 <span style="grid-row:2;"><x></x></span> 59 </div> 60 </div></div> 61 62 <div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> 63 <div style="padding-top:1px; background:grey"> 64 <div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0; max-height:89px;"> 65 <span></span> 66 <span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> 67 <span style="grid-row:2;"><x></x></span> 68 </div> 69 </div></div> 70 71 <div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> 72 <div style="padding-top:1px; background:grey"> 73 <div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0; max-height:94px;"> 74 <span></span> 75 <span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> 76 <span style="grid-row:2;"><x></x></span> 77 </div> 78 </div></div> 79 80 <div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> 81 <div style="padding-top:1px; background:grey"> 82 <div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0; max-height:95px;"> 83 <span></span> 84 <span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> 85 <span style="grid-row:2;"><x></x></span> 86 </div> 87 </div></div> 88 89 <div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> 90 <div style="padding-top:1px; background:grey"> 91 <div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0; max-height:200px;"> 92 <span></span> 93 <span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> 94 <span style="grid-row:2;"><x></x></span> 95 </div> 96 </div></div> 97 98 <div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> 99 <div style="padding-top:1px; background:grey"> 100 <div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0; max-height:none;"> 101 <span></span> 102 <span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> 103 <span style="grid-row:2;"></span> 104 </div> 105 </div></div> 106 107 108 </body> 109 </html>