| <!DOCTYPE html> |
| <title> |
| Grid Item (First) Baseline Inline-Axis Alignment: auto-width grid, auto column, auto items |
| </title> |
| <link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> |
| <link rel="help" href="https://www.w3.org/TR/css-grid-1/#algo-content"> |
| <link rel="help" href="https://www.w3.org/TR/css-align-3/#baseline-values"> |
| <link rel="match" href="references/grid-baseline-justify-001-ref.html"> |
| |
| <style> |
| @import "/fonts/ahem.css"; |
| .grid { |
| border: solid silver; |
| margin: 1em 2px; |
| font: 20px/1 Ahem; |
| |
| display: inline-grid; |
| vertical-align: top; |
| grid-template-rows: repeat(4, max-content); |
| } |
| .grid > div { |
| border: black 10px; |
| border-style: none solid; |
| color: orange; |
| writing-mode: vertical-rl; |
| } |
| div + div { |
| font-size: 2em; |
| } |
| div + div + div { |
| font-size: 50%; |
| } |
| .self > div { |
| justify-self: baseline; |
| } |
| .content > div { |
| align-content: baseline; |
| } |
| div.stretch { |
| justify-self: stretch; |
| } |
| |
| .ref { |
| position: relative; |
| width: 96px; |
| height: 80px; |
| } |
| .ref > div { |
| position: absolute; |
| } |
| .ref1 { right: 16px; } |
| .ref2 { top: 20px; |
| right: 0px; } |
| .ref3 { right: 24px; |
| top: 60px; } |
| .ref4 { bottom: 0px; |
| right: 0px; |
| left: 0px; |
| height: 10px; } |
| |
| .ref.content > div:not(.stripe) { |
| border-color: transparent; |
| } |
| .stripe { |
| width: 76px; |
| height: 80px; |
| } |
| </style> |
| |
| <p>Test passes if each pair of boxes is identical.</p> |
| |
| <div class="grid self"> |
| <div> |
| p<br> |
| p<br> |
| p |
| </div> |
| <div> |
| p |
| </div> |
| <div> |
| p |
| </div> |
| <div class="stretch"> |
| |
| </div> |
| </div> |
| |
| <div class="grid self ref"> |
| <div class="ref1"> |
| p<br> |
| p<br> |
| p |
| </div> |
| <div class="ref2"> |
| p |
| </div> |
| <div class="ref3"> |
| p |
| </div> |
| <div class="ref4"> |
| |
| </div> |
| </div> |
| |
| <br> |
| |
| <div class="grid content"> |
| <div> |
| p<br> |
| p<br> |
| p |
| </div> |
| <div> |
| p |
| </div> |
| <div> |
| p |
| </div> |
| <div class="stretch"> |
| |
| </div> |
| </div> |
| |
| <div class="grid content ref"> |
| <div class="ref1"> |
| p<br> |
| p<br> |
| p |
| </div> |
| <div class="ref2"> |
| p |
| </div> |
| <div class="ref3"> |
| p |
| </div> |
| <div class="ref4"> |
| |
| </div> |
| <div class="stripe"> |
| </div> |
| </div> |
