css/css-grid/alignment/grid-baseline-justify-001.html

<!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">
    &nbsp;
  </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">
    &nbsp;
  </div>
</div>

<br>

<div class="grid content">
  <div>
    p<br>
    p<br>
    p
  </div>
  <div>
    p
  </div>
  <div>
    p
  </div>
  <div class="stretch">
    &nbsp;
  </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">
    &nbsp;
  </div>
  <div class="stripe">
  </div>
</div>