| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>CSS Grid Layout Reference: item [min-|max-]*[width|height] percentages</title> |
| <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> |
| <style> |
| html,body { |
| color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; |
| } |
| |
| .grid { |
| display: inline-grid; |
| height: 10px; |
| width: 10px; |
| grid: 1px auto 2px 3px / 3px auto 4px 2px; |
| border: solid 1px; |
| margin: 0 20px 20px 0; |
| place-items: start; |
| } |
| .item { |
| background: cyan; |
| grid-area: 2/2/span 2/span 2; |
| height: 30px; |
| width: 30px; |
| } |
| .content { |
| height: 30px; |
| width: 30px; |
| } |
| .min { |
| height: 6px; |
| width: 5px; |
| } |
| .min:not(.max):not(.size) { |
| height: 30px; |
| width: 30px; |
| } |
| |
| .hl .item { writing-mode: horizontal-tb; direction:ltr; } |
| .hr .item { writing-mode: horizontal-tb; direction:rtl; } |
| .vrl .item { writing-mode: vertical-rl; direction:ltr; } |
| .vrr .item { writing-mode: vertical-rl; direction:rtl; } |
| .vll .item { writing-mode: vertical-lr; direction:ltr; } |
| .vlr .item { writing-mode: vertical-lr; direction:rtl; } |
| .sll .item { writing-mode: sideways-lr; direction:ltr; } |
| .slr .item { writing-mode: sideways-lr; direction:rtl; } |
| |
| </style> |
| <div class="hl"> |
| <div class="grid"> |
| <div class="item max"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item min"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item size"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item max size"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item min size"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item min max"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item min max size"> |
| <div class="content"></div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="vrl"> |
| <div class="grid"> |
| <div class="item max"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item min"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item size"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item max size"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item min size"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item min max"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item min max size"> |
| <div class="content"></div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="vrr"> |
| <div class="grid"> |
| <div class="item max"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item min"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item size"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item max size"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item min size"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item min max"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item min max size"> |
| <div class="content"></div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="vll"> |
| <div class="grid"> |
| <div class="item max"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item min"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item size"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item max size"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item min size"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item min max"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item min max size"> |
| <div class="content"></div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="vlr"> |
| <div class="grid"> |
| <div class="item max"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item min"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item size"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item max size"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item min size"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item min max"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item min max size"> |
| <div class="content"></div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="slr"> |
| <div class="grid"> |
| <div class="item max"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item min"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item size"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item max size"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item min size"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item min max"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item min max size"> |
| <div class="content"></div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="srl"> |
| <div class="grid"> |
| <div class="item max"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item min"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item size"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item max size"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item min size"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item min max"> |
| <div class="content"></div> |
| </div> |
| </div> |
| <div class="grid"> |
| <div class="item min max size"> |
| <div class="content"></div> |
| </div> |
| </div> |
| </div> |