grid-item-margins-and-writing-modes-001.html (1775B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Grid: Grid items and logical margins</title> 4 <link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns"> 6 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-column"> 7 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-row"> 8 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items"> 9 <link rel="match" href="grid-item-margins-and-writing-modes-001-ref.html"> 10 <meta name="assert" content="This test ensures that the border, margin, and padding 11 combining with RTL direction and different writing-modes generate the proper layout."/> 12 <link href="/css/support/grid.css" rel="stylesheet"> 13 <link href="/fonts/ahem.css" rel="stylesheet"/> 14 <style> 15 .grid { 16 grid-template-columns: 80px; 17 } 18 19 .block { 20 background-color: grey; 21 width: 80px; 22 height: 80px; 23 position: relative; 24 margin-bottom: 5px; 25 border: 1px solid; 26 } 27 28 .item { 29 font: 15px/1 Ahem; 30 background-color: green; 31 grid-column: 1 / 2; 32 grid-row: 1 / 2; 33 width: 40px; 34 height: 20px; 35 margin: 4px 8px 12px 16px; 36 } 37 </style> 38 39 <body> 40 <div class="grid block"> 41 <div class="item">X</div> 42 </div> 43 <div class="grid block verticalRL"> 44 <div class="item">X</div> 45 </div> 46 <div class="grid block verticalLR"> 47 <div class="item">X</div> 48 </div> 49 <div class="grid block directionRTL"> 50 <div class="item">X</div> 51 </div> 52 <div class="grid block directionRTL verticalRL"> 53 <div class="item">X</div> 54 </div> 55 <div class="grid block directionRTL verticalLR"> 56 <div class="item">X</div> 57 </div> 58 </body> 59 60 </body> 61 </html>