Web.QHMIT
.com
Toggle navigation
☰
Home
HTML
CSS
Scripting
Database
Run
<!doctype html> <title>Example</title> <style> .grid { display: grid; grid-template-rows: repeat(6, 1fr); grid-template-columns: repeat(12, 1fr); grid-gap: 10px; } .box { color: white; padding: 7px; background: gold; text-align: center; } .box:nth-child(2), .box:nth-child(21) { grid-column: span 11; } .box:nth-child(3), .box:nth-child(20) { grid-column: span 2; } .box:nth-child(4), .box:nth-child(19) { grid-column: span 10; } .box:nth-child(5), .box:nth-child(18) { grid-column: span 3; } .box:nth-child(6), .box:nth-child(17) { grid-column: span 9; } .box:nth-child(7), .box:nth-child(16) { grid-column: span 4; } .box:nth-child(8), .box:nth-child(15) { grid-column: span 8; } .box:nth-child(9), .box:nth-child(14) { grid-column: span 5; } .box:nth-child(10), .box:nth-child(13) { grid-column: span 7; } .box:nth-child(11), .box:nth-child(12) { grid-column: span 6; } @media screen and (max-width: 575px) { .grid { display: block; } .box { margin: 10px 0; } } </style> <main class="grid"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> <div class="box">6</div> <div class="box">7</div> <div class="box">8</div> <div class="box">9</div> <div class="box">10</div> <div class="box">11</div> <div class="box">12</div> <div class="box">13</div> <div class="box">14</div> <div class="box">15</div> <div class="box">16</div> <div class="box">17</div> <div class="box">18</div> <div class="box">19</div> <div class="box">20</div> <div class="box">21</div> <div class="box">22</div> </main>
Preview