grid-self-baseline-001-ref.html (2963B)
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 font-family: Ahem; 14 line-height: 1; 15 } 16 .block > :nth-child(1) { font-size:24px; } 17 .block > :nth-child(2) { font-size:32px; } 18 .block > :nth-child(3) { font-size:48px; } 19 .block > :nth-child(4) { font-size:64px; } 20 .item { 21 display: inline-block; 22 border-width: 2px 5px 3px 4px; 23 border-style: solid; 24 padding: 6px 3px 7px 8px; 25 margin: 10px 6px 4px 12px; 26 } 27 .extraBottomPadding { padding-bottom: 30px; } 28 .extraLeftPadding { padding-left: 30px; } 29 .area { display: inline-block; } 30 .area:nth-child(1) { width: 60px; } 31 .area:nth-child(2) { width: 60px; } 32 .area:nth-child(3) { width: 75px; } 33 .area:nth-child(4) { width: 100px; } 34 .verticalLR.area, .verticalRL.area { width: auto; } 35 .verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 60px; } 36 .verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 60px; } 37 .verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 75px; } 38 .verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 100px; } 39 .block { height: 125px; } 40 .block.verticalLR, .block.verticalRL { 41 width: 125px; 42 height: auto; 43 } 44 </style> 45 46 <p>1x4 with parallel items.</p> 47 <div class="block"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div> 48 <div class="block"><div class="area"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div> 49 50 <br clear="all"> 51 52 <div class="block verticalLR"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div> 53 <div class="block verticalLR"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div> 54 <div class="block verticalRL"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div> 55 <div class="block verticalRL"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>