grid-lanes-gap-002-ref.html (1764B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>Reference: Grid Lanes layout with normal `gap` in both axes</title> 9 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 10 <link rel="author" title="Elika J. Etemad" href="https://fantasai.inkedblade.net/contact"> 11 <style> 12 html,body { 13 color:black; background-color:white; font:25px/1 "Courier New", monospace; padding:0; margin:0; 14 } 15 16 grid { 17 display: inline-grid; 18 gap: 0; 19 grid-template-columns: auto min-content repeat(2,auto); 20 color: #444; 21 border: 1px solid; 22 padding: 2px; 23 } 24 25 item { 26 background-color: #444; 27 color: #fff; 28 padding: 20px; 29 margin: 3px; 30 border: 5px solid blue; 31 place-self: start; 32 grid-row: span 2; 33 display: block; 34 } 35 </style> 36 </head> 37 <body> 38 39 <grid> 40 <item>1</item> 41 <item style="padding:0; grid-row: span 1">2</item> 42 <item>3</item> 43 <item>4</item> 44 <item style="padding:0; grid-column: 2; grid-row: 2">5</item> 45 </grid> 46 47 <grid> 48 <item>1</item> 49 <item style="padding:0; grid-row: span 1">2</item> 50 <item>3</item> 51 <item>4</item> 52 <item style="padding:0; grid-column: 2; grid-row: 2">5</item> 53 </grid> 54 55 <grid> 56 <div style="columns: 3; column-gap: 1em;"> 57 <item>1</item> 58 <item>2</item> 59 <item>3</item> 60 </div> 61 <div style="columns: 3; column-gap: 1em; visibility: hidden;"> 62 <item>1</item> 63 <item>2</item> 64 <item>3</item> 65 </div> 66 <div style="columns: 3; column-gap: 1em; visibility: hidden;"> 67 <item>1</item> 68 <item>2</item> 69 <item>3</item> 70 </div> 71 <div style="columns: 3; column-gap: 1em; visibility: hidden;"> 72 <item>1</item> 73 <item>2</item> 74 <item>3</item> 75 </div> 76 </grid>