Hi Fiona,
I like to create dynamic grid columns and rows by click on some grid item.
as if I click on div which grid item ->it shows me 10 grid columns
and if I click on another div it shows 8 grid columns.
my code is:
<!DOCTYPE html>
<html>
<head>
<title>Using CSS Grid</title>
<style>
body {
color: #fff;
font-family: ‘Nunito Semibold’;
text-align: center;
}
#content {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 1em;
max-width: 970px;
margin: 0 auto;
grid-template-areas: “header header header header” “main main main main” “main main main main” “aside aside aside aside” “nav nav nav nav” “section section section section” “footer footer footer footer”;
}
/* desktop grid */
@media screen and (min-width: 760px) {
#content {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 10px;
max-width: 1360px;
margin: 0 auto;
grid-template-areas: “header header header header” “aside main main main” “nav main main main” “footer footer footer footer”;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
/* padding: 20px; */
font-size: 100%;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
/* padding: 20px; */
font-size: 100%;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.section {
background-color: #444;
color: #fff;
border-radius: 5px;
/* padding: 20px; */
font-size: 100%;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
#content>* {
padding: 30px;
}
header {
grid-area: header;
background-color: orange;
display: inline-grid;
border: 1px solid black;
}
main {
grid-area: main;
border: 1px solid black;
}
nav {
display: grid;
background-color: white;
border: 1px solid black;
grid-area: nav;
grid-gap: 1em;
grid-template-columns: repeat(4, 1fr);
}
aside {
border: 1px solid black;
grid-area: aside;
display: grid;
grid-gap: 1em;
grid-template-columns: repeat(3, 1fr);
}
footer {
border: 1px solid black;
grid-area: footer;
background: #333 !important;
}
.navi div {
background: #3bbced;
padding: 30px;
}
.navi div:nth-child(even) {
background: #777;
padding: 30px;
}
.aside div {
background: orange;
padding: 30px;
}
</style>
<script>
window.addEventListener(“DOMContentLoaded”, function () {
let boxes = document.querySelectorAll(“.box”);
Array.from(boxes, function (box) {
box.addEventListener(“click”, function () {
alert(this.classList[1]);
});
});
});
</script>
</head>
<body>
<div id=”content”>
<header>Header</header>
<main>Main</main>
<aside class=”aside”>
<div class=”section first”>AC</div>
<div class=”section second”>NON AC</div>
<div class=”section third”>HALL</div>
<div class=”section fourth”>GARDEN</div>
</aside>
<nav class=”navi”>
<div class=”box first”>1</div>
<div class=”box second”>2</div>
<div class=”box third”>3</div>
<div class=”box fourth”>4</div>
<div class=”box fifth”>5</div>
<div class=”box sixth”>6</div>
<div class=”box seventh”>7</div>
<div class=”box eighth”>8</div>
<div class=”box ninth”>9</div>
<div class=”box tenth”>10</div>
<div class=”box eleventh”>11</div>
<div class=”box twelvth”>12</div>
<div class=”box thirteenth”>13</div>
<div class=”box forteenth”>14</div>
<div class=”box fifteenth”>15</div>
<div class=”box sixteenth”>16</div>
</nav>
<footer>Footer</footer>
</div>
</body>
</html>
