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:

Update the class for given div Using DOM manipulation

Question: How to update the class using vanilla javascript.

Answer:

Add class:

function addClass(selector, className) {

var elm = document.querySelector(selector);

if (elm){

elm.classList.add(className);

}

}

Remove class:

function addClass(selector, className){

var elm = document.querySelector(selector);

if (elm){

elm.classList.remove(className);

}

}
Toggle class:

function toggleClass(selector, className){

var elm = document.querySelector(selector);

if (elm){

elm.classList.toggle(className);

}

}

Check class:

function checkClass(selector, className){

var elm = document.querySelector(selector);

if (elm){

return elm.classList.contains(className);

}

}

Try it yourself: