grid-self-baseline-002-ref.html (2584B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="stylesheet" href="/fonts/ahem.css"> 4 <link rel="stylesheet" href="/css/support/alignment.css"> 5 <link rel="stylesheet" href="/css/support/grid.css"> 6 <style> 7 body { margin: 0; } 8 .block { 9 background: grey; 10 float: left; 11 margin: 5px; 12 text-orientation: sideways; 13 width: 175px; 14 font-family: Ahem; 15 line-height: 1; 16 } 17 .block1 > :nth-child(1) { font-size:24px; } 18 .block1 > :nth-child(2) { font-size:32px; } 19 .block2 > :nth-child(1) { font-size:48px; } 20 .block2 > :nth-child(2) { font-size:64px; } 21 .item { 22 display: inline-block; 23 border-width: 2px 5px 3px 4px; 24 border-style: solid; 25 padding: 6px 3px 7px 8px; 26 margin: 10px 6px 4px 12px; 27 } 28 .extraLeftPadding { padding-left: 30px; } 29 .extraRightPadding { padding-right: 30px; } 30 .area { display: inline-block; } 31 .block1 > .area:nth-child(1) { height: 60px; } 32 .block1 > .area:nth-child(2) { height: 60px; } 33 .block2 > .area:nth-child(1) { height: 75px; } 34 .block2 > .area:nth-child(2) { height: 100px; } 35 .block1 { float: left; } 36 .block2 { float: left; } 37 </style> 38 39 <p>1x4 with parallel items, but opposite block-flow direction.</p> 40 <div class="block verticalLR"> 41 <div class="block1"> 42 <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div> 43 </div> 44 <div class="block2 verticalRL" style="margin-left: 73px;"> 45 <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div> 46 </div> 47 </div> 48 <div class="block verticalLR"> 49 <div class="block1"> 50 <div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div> 51 </div> 52 <div class="block2 verticalRL" style="margin-left: 73px;"> 53 <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div> 54 </div> 55 </div> 56 <div class="block verticalRL"> 57 <div class="block1"> 58 <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div> 59 </div> 60 <div class="block2 verticalLR" style="margin-right: 73px;"> 61 <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div> 62 </div> 63 </div> 64 <div class="block verticalRL"> 65 <div class="block1"> 66 <div class="area"><div class="item extraRightPadding">É</div></div><div class="area"><div class="item">É</div></div> 67 </div> 68 <div class="block2 verticalLR" style="margin-right: 73px;"> 69 <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div> 70 </div> 71 </div>