Web.QHMIT
.com
Toggle navigation
☰
Home
HTML
CSS
Scripting
Database
Run
<!doctype html> <title>Example</title> <style> .grid { display: block; } .box { color: white; font-size: 2vh; padding: 10px; background: yellowgreen; margin: 10px 0; text-align: center; } @media screen and (min-width: 576px) { .grid { display: grid; grid-template-rows: repeat(12, 1fr); grid-template-columns: repeat(6, 1fr); grid-auto-flow: column; grid-gap: 10px; } .box { margin: 0; } .box:nth-child(1) { grid-row: span 12; } .box:nth-child(2), .box:nth-child(3) { grid-row: span 6; } .box:nth-child(4), .box:nth-child(5), .box:nth-child(6) { grid-row: span 4; } .box:nth-child(7), .box:nth-child(8), .box:nth-child(9), .box:nth-child(10) { grid-row: span 3; } .box:nth-child(11), .box:nth-child(12), .box:nth-child(13), .box:nth-child(14), .box:nth-child(15), .box:nth-child(16) { grid-row: span 2; } } </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> <div class="box">23</div> <div class="box">24</div> <div class="box">25</div> <div class="box">26</div> <div class="box">27</div> <div class="box">28</div> </main>
Preview