Create the Grid Layout

Question: Create the Grid Layout so First Div will span the first two columns, in the first two rows.

Answer:

HTML Code:

<div class="grid-container">

<div class="grid-slot">1</div>
<div class="grid-slot">2</div>
<div class="grid-slot">3</div>
<div class="grid-slot">4</div>
<div class="grid-slot">5</div>
<div class="grid-slot">6</div>
<div class="grid-slot">7</div>
<div class="grid-slot">8</div>
<div class="grid-slot">9</div>
<div class="grid-slot">10</div>
<div class="grid-slot">11</div>
<div class="grid-slot">12</div>

</div>


CSS Code:


.grid-slot:first-of-type {

grid-area: test;

}
.grid-container {

display: grid;
grid:
'test test . '
'test test .';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;

}
.grid-container>div {

background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding:20px 0;
font-size: 30px;

}

Try It yourself: