grid-fragmentation-021-ref.html (4971B)
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 with ::before/::after items</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: 3; 19 -webkit-columns: 3; 20 columns: 3; 21 -ms-column-fill: auto; 22 -webkit-column-fill: auto; 23 column-fill: auto; 24 border: 2px solid salmon; 25 margin-bottom: 1px; 26 height: 150px; 27 } 28 .no-border { border-style:none; } 29 30 .grid { 31 display: grid; 32 grid-template-columns: 30px; 33 grid-auto-rows: 20px; 34 grid-gap: 2px; 35 border:5px solid; 36 counter-reset: item; 37 } 38 .start { 39 align-content: start; 40 } 41 42 span { counter-increment:item; } 43 .br1.before { grid-row:1; } 44 .ar1.after { grid-row:1; } 45 .br2.before { grid-row:2; } 46 .ar2.after { grid-row:2; } 47 .br7.before { grid-row:7; } 48 .ar7.after { grid-row:7; } 49 50 .span5 { grid-row-end: span 5; background:lime; } 51 52 .span15 { grid-row: 1 / span 15; grid-column:1; background:lime; } 53 .span15.before { grid-row-end: span 15; grid-column:3; background:grey; } 54 .span15.after { grid-row: 2 / span 15; grid-column:2; background:lime; } 55 56 .break-before { page-break-before:always; break-before:always; } 57 .break-after { page-break-after:always; break-after:always; } 58 .avoid-break { page-break-inside:avoid; break-inside:avoid; } 59 60 </style> 61 </head> 62 <body> 63 64 <div class="columns"> 65 <div class="grid"> 66 <span><c>5:before</c></span> 67 <span><c>2:after</c></span> 68 <span><c>1:before</c></span> 69 <span class="ar2"><c>1</c></span> 70 <span class="ar2"><c>1:after</c></span> 71 <span class="ar2"><c>2:before</c></span> 72 <span><c>2</c></span> 73 <span><c>3:before</c></span> 74 <span><c>3</c></span> 75 <span><c>3:after</c></span> 76 <span><c>4:before</c></span> 77 <span><c>4</c></span> 78 <span class="br1"><c>4:after</c></span> 79 <span class="br1"><c>5</c></span> 80 <span class="br1"><c>5:after</c></span> 81 </div></div> 82 83 <div class="columns"> 84 <div class="grid"> 85 <span><c>5:after</c></span> 86 <span><c>4:after</c></span> 87 <span><c>1:before</c></span> 88 <span><c>1</c></span> 89 <span><c>1:after</c></span> 90 <span><c>2:before</c></span> 91 <span><c>2</c></span> 92 <span><c>2:after</c></span> 93 <span><c>3:before</c></span> 94 <span class="ar2"><c>3</c></span> 95 <span class="ar2"><c>3:after</c></span> 96 <span class="ar2"><c>4:before</c></span> 97 <span class="ar1"><c>4</c></span> 98 <span class="ar1"><c>5:before</c></span> 99 <span class="ar1"><c>5</c></span> 100 </div></div> 101 102 <div class="columns"> 103 <div class="grid"> 104 <span><c>5:after</c></span> 105 <span><c>5:before</c></span> 106 <span><c>1:before</c></span> 107 <span><c>1</c></span> 108 <span><c>1:after</c></span> 109 <span><c>2:before</c></span> 110 <span><c>2</c></span> 111 <span><c>2:after</c></span> 112 <span><c>3:before</c></span> 113 <span><c>3</c></span> 114 <span><c>3:after</c></span> 115 <span><c>4:before</c></span> 116 <span class="ar1 br2"><c>4</c></span> 117 <span class="ar1 br2"><c>4:after</c></span> 118 <span class="ar1 br2"><c>5</c></span> 119 </div></div> 120 121 <div class="columns"> 122 <div class="grid"> 123 <span><c>5:before</c></span> 124 <span><c>5:after</c></span> 125 <span><c>1:before</c></span> 126 <span><c>1</c></span> 127 <span><c>1:after</c></span> 128 <span><c>2:before</c></span> 129 <span><c>2</c></span> 130 <span><c>2:after</c></span> 131 <span><c>3:before</c></span> 132 <span><c>3</c></span> 133 <span><c>3:after</c></span> 134 <span><c>4:before</c></span> 135 <span class="ar2 br1"><c>4</c></span> 136 <span class="ar2 br1"><c>4:after</c></span> 137 <span class="ar2 br1"><c>5</c></span> 138 </div></div> 139 140 <div class="columns"> 141 <div class="grid"> 142 <span><c>5:before</c></span> 143 <span><c>4:before</c></span> 144 <span><c>1:before</c></span> 145 <span><c>1</c></span> 146 <span><c>1:after</c></span> 147 <span><c>2:before</c></span> 148 <span><c>2</c></span> 149 <span><c>2:after</c></span> 150 <span><c>3:before</c></span> 151 <span class="br2"><c>3</c></span> 152 <span class="br2"><c>3:after</c></span> 153 <span class="br2"><c>4</c></span> 154 <span class="br1"><c>4:after</c></span> 155 <span class="br1"><c>5</c></span> 156 <span class="br1"><c>5:after</c></span> 157 </div></div> 158 159 <div class="columns"> 160 <div class="grid"> 161 <span><c>1:before</c></span> 162 <span><c>5:before</c></span> 163 <span><c>1</c></span> 164 <span><c>1:after</c></span> 165 <span><c>2:before</c></span> 166 <span><c>2</c></span> 167 <span><c>4:before</c></span> 168 <span><c>2:after</c></span> 169 <span class="span5"><c>3:before</c></span> 170 <span class="span5"><c>3</c></span> 171 <span class="span5"><c></c></span> 172 <span class="br7"><c></c></span> 173 <span class="br2"><c></c></span> 174 <span class="br2"><c></c></span> 175 <span class="br2"><c></c></span> 176 </div></div> 177 178 <div class="columns"> 179 <div class="grid" style="grid-template-columns: 30px 30px 30px"> 180 <span class="span15 before"><c>1:before</c></span> 181 <span class="span15"><c>1</c></span> 182 <span class="span15 after"><c>1:after</c></span> 183 </div></div> 184 185 </body> 186 </html>