CSS Grid/CSS-grid-items-placing.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Items Placing</title>
    <style>
        :root{
    --black:black;
    --green:palegreen;
    --yellow: #ffc600;
}

html{
    box-sizing: border-box;
    font-size: 12px;
    font-weight: bold;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body{
    background: linear-gradient(to right, rgb(241, 39, 17), rgb(245, 175, 25));
    margin: 50px;
}
.num{
    display: grid;
    justify-content: center;
    align-items: center;
    border: 5px solid rgba(0, 0, 0, 0.03);
    border-radius: 3px;
    color: whitesmoke;
    font-size: 35px;
    background-color: var(--black); 
}
/* Grid */
.container{
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(5,1fr);

}
.emo{
    background: var(--green);
    grid-column:1 / span 2;
    grid-row: 1 / -1;
}
    </style>
</head>
<body>
    <div class="container">
     <div class="num num1">1</div>
     <div class="num num2">2</div>
     <div class="num num3">3</div>
     <div class="num num4">4</div>
     <div class="num num5">5</div>
     <div class="num num6">6</div>
     <div class="num num7">7</div>
     <div class="num num8">8</div>
     <div class="num emo">👀</div>
     <div class="num num9">9</div>
     <div class="num num10">10</div>
     <div class="num num11">11</div>
     <div class="num num12">12</div>
     <div class="num num13">13</div>
     <div class="num num14">14</div>
     <div class="num num15">15</div>
     <div class="num num16">16</div>
     <div class="num num17">17</div>
     <div class="num num18">18</div>
     <div class="num num19">19</div>
     <div class="num num20">20</div>
     <div class="num num21">21</div>
     <div class="num num22">22</div>
     <div class="num num23">23</div>
     <div class="num num24">24</div>
     <div class="num num25">25</div>
     <div class="num num26">26</div>
     <div class="num num27">27</div>
     <div class="num num28">28</div>
     <div class="num num29">29</div>
     <div class="num num30">30</div>        
    </div>
</body>
</html>             