Template Area in css grid practice
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css template </title>
</head>
<style>
.container{
display: grid;
grid-gap: 5px;
grid-template-areas:
'navbar navbar navbar navbar'
'section section section aside'
'footer footer footer footer'
;
/* grid-template-columns: auto(300px,minandmax(1fr)); */
}
.vishal{
background-color: black;
color: white;
padding: 20px;
}
#navbar{
grid-area: navbar;
}
#section{
grid-area: section;
}
#aside{
grid-area: aside;
}
footer{
grid-area: footer;
}
</style>
<body>
<div class="container">
<div id="navbar" class="vishal">
About home contack tada adsasd
</div>
<div id="sectiom" class="vishal">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio totam cumque quis quaerat voluptates animi fugit quasi tenetur consequatur earum ipsum, facere labore tempore libero hic dolorem nulla corporis accusantium?
</div>
<div id="aside" class="vishal">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex laboriosam soluta minus molestias, beatae dignissimos aliquid dolorum, quod est magnam necessitatibus at, ab veritatis nihil incidunt suscipit a harum! Voluptatum!
</div>
<footer class="vishal">Lorem ipsum dolor sit amet.</footer>
</div>
</body>
</html>
Thanks you for commenting your questions. I will see question and respond you.