1629575-2.html (1458B)
1 <!DOCTYPE html> 2 <html><head> 3 4 5 <style> 6 .grid-container { 7 display: grid; 8 border: solid thick; 9 margin: 10px; 10 } 11 12 .columns { 13 grid-template-columns: repeat(auto-fill, 50px 50px); 14 grid-auto-rows: 25px; 15 grid-column-gap: 100px; 16 width: 300px; 17 } 18 19 .rows { 20 grid-auto-flow: column; 21 grid-template-rows: repeat(auto-fill, 50px 50px); 22 grid-auto-columns: 25px; 23 grid-row-gap: 100px; 24 width: min-content; 25 height: 300px; 26 } 27 28 .grid-container>div { 29 background: lime; 30 } 31 </style> 32 33 <style> 34 div { grid-column-start: first;} 35 </style> 36 37 </head> 38 39 <body> 40 41 <div class="grid-container columns"> 42 <div></div> 43 <div></div> 44 <div></div> 45 <div></div> 46 </div> 47 <div class="grid-container columns" 48 style="grid-template-columns: repeat(auto-fill, 50px 50px 50px)"> 49 <div></div> 50 <div></div> 51 <div></div> 52 <div></div> 53 </div> 54 <div class="grid-container columns" 55 style="grid-template-columns: repeat(auto-fill, 50px 50px 50px 50px)"> 56 <div></div> 57 <div></div> 58 <div></div> 59 <div></div> 60 </div> 61 <div class="grid-container rows"> 62 <div></div> 63 <div></div> 64 <div></div> 65 <div></div> 66 </div> 67 68 69 </body></html>