3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
8 <title>CSS Grid Test: stretching input items with auto-margins and/or orthogonal writing-mode
</title>
9 <link rel=
"author" title=
"Mats Palmgren" href=
"https://bugzilla.mozilla.org/show_bug.cgi?id=1317168">
10 <link rel=
"help" href=
"https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal">
11 <link rel=
"match" href=
"grid-item-input-stretch-001-ref.html">
12 <style type=
"text/css">
13 * { color:black
; background-color:white
; font:10px/1.5 monospace
; padding:0; margin:0; }
14 * { vertical-align: top
; }
18 grid: 2px 30px 3px / 6px 200px 4px;
26 background: lightgrey
;
30 .m { margin: 7px 3px 1px 5px; }
31 .p { padding: 3px 1px 5px 7px; }
32 .hma10 { margin: 7px 3px 1px auto
; }
33 .hmaa { margin: 7px auto
1px auto
; }
34 .vma10 { margin: auto
7px 3px 1px; }
35 .vmaa { margin: auto
7px auto
1px; }
36 .mxw { max-width: 32px; }
37 .mxh { max-height: 16px; }
39 .vr { writing-mode: vertical-rl
; }
44 <div class=
"grid" style=
"place-items:start"><input></div>
45 <div class=
"grid"><input class=
"m"></div>
46 <div class=
"grid"><input class=
"hma10"></div>
47 <div class=
"grid"><input class=
"hmaa"></div>
48 <div class=
"grid"><input class=
"vr hma10"></div>
49 <div class=
"grid"><input class=
"vr hmaa"></div>
50 <div class=
"grid"><input class=
"vr"></div>
52 <div class=
"grid"><input class=
"vma10"></div>
53 <div class=
"grid"><input class=
"vmaa"></div>
54 <div class=
"grid"><input class=
"vr vma10"></div>
55 <div class=
"grid"><input class=
"vr vmaa"></div>
56 <div class=
"grid"><input class=
"vr p vma10"></div>
57 <div class=
"grid"><input class=
"vr p vmaa"></div>
59 <div class=
"grid"><input class=
"mxw m"></div>
60 <div class=
"grid"><input class=
"mxw hma10"></div>
61 <div class=
"grid"><input class=
"mxw hmaa"></div>
62 <div class=
"grid"><input class=
"mxw vr hma10"></div>
63 <div class=
"grid"><input class=
"mxw vr"></div>
65 <div class=
"grid"><input class=
"mxh m"></div>
66 <div class=
"grid"><input class=
"mxh hma10"></div>
67 <div class=
"grid"><input class=
"mxh hmaa"></div>
68 <div class=
"grid"><input class=
"mxh vr hmaa"></div>
69 <div class=
"grid"><input class=
"mxh vr"></div>
71 <div class=
"grid" style=
"grid:minmax(min-content,0) / minmax(min-content,0)"><input style=
"grid-area:1/1"></div>
72 <div class=
"grid" style=
"grid:minmax(min-content,0) / minmax(min-content,0); align-items:start; justify-items:start"><input style=
"grid-area:1/1"></div>