CSS Grid helps to create a two dimentional layouts. We can place the content in horizontal rows and vertical columns. it is helps to create a complex layout in easy way. Here we have given sample grid layout code for beginners to kickstart.
<div class="container">
<nav>NavBar</nav>
<main>main</main>
<div id="sidebar">Sidebar</div>
<div id="content1">Content1</div>
<div id="content2">Content2</div>
<div id="content3">Content3</div>
<footer>Footer</footer>
</div>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<style type="text/css">
:root{
--common-padding:5px;
}
.container {
display:grid;
height:100vh;
grid-template-columns:1fr 1fr 1fr 1fr;
grid-template-rows: 0.2fr 1.5fr 1.2fr 0.8fr;
grid-template-areas: "nav nav nav nav" "sidebar main main main" "sidebar content1 content2 content3" "footer footer footer footer";
grid-gap:0.2rem;
}
nav{
background-color: #34ebc6;
grid-area:nav;
padding-top:var(--main-padding);
}
main{
background-color:#348feb;
grid-area:main;
padding-top:var(--main-padding)
}
#sidebar{
background-color:#34eb7a;
grid-area:sidebar;
padding-top:var(--main-padding)
}
#content1{
background-color:#dfeb34;
grid-area:content1;
padding-top:var(--main-padding)
}
#content2 {
background-color:#ebc334;
grid-area:content2;
padding-top:var(--main-padding)
}
#content3 {
background-color:#eb7734;
grid-area:content3;
padding-top:var(--main-padding)
}
footer {
background-color: #eb34ab;
grid-area: footer;
padding-top:var(--main-padding)
}
@media only screen and (max-width:500px) {
.container {
grid-template-columns: 1fr;
grid-template-rows:0.2fr 1.6fr 1.2fr 0.6fr 0.6fr 0.6fr 0.3fr;
grid-template-areas: "nav" "main" "sidebar" "content1" "content2" "content3" "footer"
}
}
</style>
The below are the outputs, which is available in both desktop view and mobile view
