grid-fragmentation-021.html (3268B)
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>CSS Grid Test: Fragmentation with ::before/::after items</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> 10 <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> 11 <link rel="match" href="grid-fragmentation-021-ref.html"> 12 <style type="text/css"> 13 html,body { 14 color:black; background-color:white; font-size:16px; padding:0; margin:0; 15 } 16 body { overflow:hidden; } 17 18 .columns { 19 position:relative; 20 -ms-columns: 3; 21 -webkit-columns: 3; 22 columns: 3; 23 -ms-column-fill: auto; 24 -webkit-column-fill: auto; 25 column-fill: auto; 26 border: 2px solid salmon; 27 margin-bottom: 1px; 28 height: 150px; 29 } 30 .no-border { border-style:none; } 31 32 .grid { 33 display: grid; 34 grid-template-columns: 30px; 35 grid-auto-rows: 20px; 36 grid-gap: 2px; 37 border:5px solid; 38 counter-reset: item; 39 } 40 .start { 41 align-content: start; 42 } 43 44 span { display:contents; } 45 span::before { counter-increment:item; content: counter(item) ":before"; } 46 span::after { content: counter(item) ":after"; } 47 c::before { content: counter(item); } 48 .br1::before { grid-row:1; } 49 .ar1::after { grid-row:1; } 50 .br2::before { grid-row:2; } 51 .ar2::after { grid-row:2; } 52 .br7::before { grid-row:7; } 53 .ar7::after { grid-row:7; } 54 55 .span5 * { grid-row-end: span 5; background:lime; } 56 .span5::before { grid-row-end: span 5; background:lime; } 57 .span5::after { grid-row-end: span 5; background:lime; } 58 59 .span15 * { grid-row: 1 / span 15; background:lime; } 60 .span15::before { grid-row-end: span 15; background:grey; } 61 .span15::after { grid-row: 2 / span 15; background:lime; } 62 63 .break-before { page-break-before:always; break-before:always; } 64 .break-after { page-break-after:always; break-after:always; } 65 .avoid-break { page-break-inside:avoid; break-inside:avoid; } 66 67 </style> 68 </head> 69 <body> 70 71 <div class="columns"> 72 <div class="grid"> 73 <span><c></c></span> 74 <span class="ar2"><c></c></span> 75 <span><c></c></span> 76 <span><c></c></span> 77 <span class="br1"><c></c></span> 78 </div></div> 79 80 <div class="columns"> 81 <div class="grid"> 82 <span><c></c></span> 83 <span><c></c></span> 84 <span><c></c></span> 85 <span class="ar2"><c></c></span> 86 <span class="ar1"><c></c></span> 87 </div></div> 88 89 <div class="columns"> 90 <div class="grid"> 91 <span><c></c></span> 92 <span><c></c></span> 93 <span><c></c></span> 94 <span><c></c></span> 95 <span class="ar1 br2"><c></c></span> 96 </div></div> 97 98 <div class="columns"> 99 <div class="grid"> 100 <span><c></c></span> 101 <span><c></c></span> 102 <span><c></c></span> 103 <span><c></c></span> 104 <span class="ar2 br1"><c></c></span> 105 </div></div> 106 107 <div class="columns"> 108 <div class="grid"> 109 <span><c></c></span> 110 <span><c></c></span> 111 <span><c></c></span> 112 <span class="br2"><c></c></span> 113 <span class="br1"><c></c></span> 114 </div></div> 115 116 <div class="columns"> 117 <div class="grid"> 118 <span><c></c></span> 119 <span><c></c></span> 120 <span class="span5"><c></c></span> 121 <span class="br7"><c></c></span> 122 <span class="br2"><c></c></span> 123 </div></div> 124 125 <div class="columns"> 126 <div class="grid" style="grid-template-columns: 30px 30px 30px"> 127 <span class="span15"><c></c></span> 128 </div></div> 129 130 </body> 131 </html>