142 lines
2.3 KiB
HTML
142 lines
2.3 KiB
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">
|
|
|
|
</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>
|