3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
8 <title>Reference: Fragmentation of definite height grid, forced break growing min-content row
</title>
9 <link rel=
"author" title=
"Mats Palmgren" href=
"https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
10 <style type=
"text/css">
12 color:black
; background-color:white
; font-size:16px; padding:0; margin:0;
14 body
{ overflow:hidden
; }
21 -ms-column-fill: auto
;
22 -webkit-column-fill: auto
;
24 border: 2px solid salmon
;
30 grid-template-columns: 30px 30px 30px;
34 align-content: space-evenly
;
36 span
{ background:lime
; border:1px solid black
; }
37 x
{ display:block
; height:20px; }
38 .t { border-bottom-width:0; }
39 .b { border-top-width:0; }
40 .m { border-top-width:0; border-bottom-width:0; }
42 i
{ display:block
; height:10px; margin-top:7px; background:blue
; }
47 <div class=
"columns" style=
"height: 100px">
48 <div style=
"padding-top:1px; background:grey">
49 <div class=
"grid t" style=
"grid-template-rows: 1fr; grid-gap:0; height:94px">
50 <span style=
"height:50px"><i style=
"height:60px"></i><x></x></span>
51 <span style=
"height:60px"><i></i><i></i><i></i><x></x></span>
53 <div class=
"grid b" style=
"grid-template-rows: 50px; grid-gap:0; height:86px">
58 <div class=
"columns" style=
"height: 100px">
59 <div style=
"padding-top:1px; background:grey">
60 <div class=
"grid t" style=
"grid-template-rows: 1fr; grid-gap:0; height:94px">
61 <span class=
"t"><x></x></span>
62 <span style=
"height:50px"><i style=
"height:60px"></i><x></x></span>
63 <span style=
"height:60px"><i></i><i></i><i></i><x></x></span>
65 <div class=
"grid b" style=
"grid-template-rows: 50px; grid-gap:0; height:86px">
66 <span class=
"b"><x></x></span>
70 <div class=
"columns" style=
"height: 100px">
71 <div style=
"padding-top:1px; background:grey">
72 <div class=
"grid t" style=
"grid-template-rows: 1fr; grid-gap:0; height:94px">
73 <span class=
"t"><x></x></span>
74 <span style=
"height:50px"><i style=
"height:60px"></i><x></x></span>
75 <span style=
"height:60px"><i></i><i></i><i></i><x></x></span>
77 <div class=
"grid b" style=
"grid-template-rows: 80px; grid-gap:0; padding-bottom:6px">
78 <span class=
"m"><x></x></span>
80 <div style=
"height:9px"></div>
81 <div class=
"grid" style=
"align-content: start; grid-gap:0; height:1px; border-width:0; margin-left:5px">
82 <span class=
"b"><x></x></span>
86 <div class=
"columns" style=
"height: 100px">
87 <div style=
"padding-top:1px; background:grey">
88 <div class=
"grid t" style=
"grid-template-rows: 17px 1fr; grid-row-gap:0; height:94px">
89 <span style=
"grid-row:2; height:50px"><x></x><i style=
"height:60px"></i></span>
90 <span style=
"grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
91 <span class=
"t" style=
"grid-row:1/span 2"><x></x></span>
93 <div class=
"grid b" style=
"grid-template-rows: 86px; grid-row-gap:0;">
94 <span class=
"m" style=
"height:10px; background:blue; margin: 0 1px; border-width:0"><x></x></span>
95 <span class=
"m" style=
"grid-column:3; height:92px;"><x></x></span>
97 <div style=
"height:9px"></div>
98 <div class=
"grid" style=
"grid-template-rows: auto; grid-row-gap:0; height:1px; border-width:0; margin-left:5px;">
99 <span class=
"b" style=
"grid-column:3; height:29px"><x></x></span>
103 <div class=
"columns" style=
"height: 100px">
104 <div style=
"padding-top:1px; background:grey">
105 <div class=
"grid t" style=
"grid-template-rows: 17px 1fr; grid-row-gap:0; height:94px">
106 <span class=
"t" style=
"grid-row:1/span 2"><x></x></span>
107 <span style=
"grid-row:2; height:50px"><x></x><i style=
"height:50px"></i></span>
108 <span style=
"grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
110 <div class=
"grid b" style=
"grid-template-rows: 86px; grid-row-gap:0;">
111 <span class=
"m" style=
"height:92px"><x></x></span>
112 <span class=
"m" style=
"height:11px; color:blue; background:blue; margin: 0 1px; border-width:0"></span>
114 <div style=
"height:9px"></div>
115 <div class=
"grid" style=
"grid-template-rows: 0; grid-row-gap:0; height:1px; border-width:0; margin-left:5px;">
116 <span class=
"b" style=
"height:29px"><x></x></span>
120 <div class=
"columns" style=
"height: 100px">
121 <div style=
"padding-top:1px; background:grey">
122 <div class=
"grid t" style=
"grid-template-rows: 50px; grid-gap:0;">
124 <div class=
"grid m" style=
"grid-template-rows: 1fr; grid-gap:0; height:100px">
125 <span class=
"t"><x></x></span>
126 <span style=
"height:50px"><i style=
"height:60px"></i><x></x></span>
127 <span style=
"height:60px"><i></i><i></i><i></i><x></x></span>
129 <div class=
"grid b" style=
"grid-template-rows: 50px; grid-gap:0; height:30px;">
130 <span class=
"b" style=
"height:49px"><x></x></span>