Media query with the css grid:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid with css media query</title>
</head>
<style>
.container{
display: grid;
grid-gap: 1rem;
grid-template-areas:
'navbar navbar navbar navbar'
'section section section aside'
'footer footer footer footer'
;
}
.item{
background-color: antiquewhite;
color: black;
padding: 12px 23px ;
}
nav{
grid-area: navbar;
}
section{
grid-area: section;
}
aside{
grid-area: aside;
}
footer{
grid-area: footer;
}
@media only screen and (min-width:250px) and (max-width:500px) {
body{
background-color: yellow;
}
.container{
grid-template-areas:
'navbar navbar navbar navbar'
'section section section section'
'aside aside aside aside'
'footer footer footer footer'
;
}
}
@media only screen and (min-width:500px) and (max-width:800px) {
body{
background-color: green;
}
.container{
grid-template-areas:
'navbar navbar navbar navbar'
'section section section section'
'aside aside aside aside'
'footer footer footer footer'
;
}
}
@media only screen and (min-width:800px) and (max-width:1200px) {
body{
background-color: red;
}
}
@media only screen and (min-width:1200px) {
body{
background-color: purple;
}
}
</style>
<body>
<div class="container">
<nav class="item">
<span>Home</span>
<span>About</span>
<span>Services</span>
</nav>
<section class="item">
<h2>This is the section</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus laborum dolorum reiciendis! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae temporibus natus suscipit.</p>
</section>
<aside class="item">This is the aside area</aside>
<footer class="item">This is the footer area</footer>
</div>
</body>
</html>
Thanks you for commenting your questions. I will see question and respond you.