Free CSS Responsive Grid Template 2
CSS Responsive Grid Template 2
Source Code
<!doctype html>
<title>CSS Grid Template 2</title>
<style>
body {
display: grid;
grid-template-areas:
"header header header"
"nav article ads"
"footer footer footer";
grid-template-rows: 80px 1fr 70px;
grid-template-columns: 20% 1fr 15%;
grid-row-gap: 10px;
grid-column-gap: 10px;
height: 100vh;
margin: 0;
}
header, footer, article, nav, div {
padding: 1.2em;
background: gold;
}
#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
/* Stack the layout on small devices/viewports. */
@media all and (max-width: 575px) {
body {
grid-template-areas:
"header"
"article"
"ads"
"nav"
"footer";
grid-template-rows: 80px 1fr 70px 1fr 70px;
grid-template-columns: 1fr;
}
}
</style>
<body>
<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Ads</div>
<footer id="pageFooter">Footer</footer>
</body>
Nice article I was really impressed by seeing this blog, it was very interesting and it is very useful for me.
ReplyDeleteWeb Designing Course in chennai
web designing training in chennai
ui ux design course in chennai
ux design course in chennai
ccna Training in Chennai
PHP Training in Chennai
ReactJS Training in Chennai
Web Designing Course in chennai
Web designing training in chennai
Thank you so much for providing information on this. It was very useful.
ReplyDeleteAviation Courses in Chennai
air hostess course in Chennai
airport courses in Chennai
Ground staff training in Chennai
Aviation Academy in Chennai
air hostess training in Chennai
airport management courses in Chennai
ground staff training in Chennai
Comfortabl y, the post is really the freshest on that deserving topic. I harmonise with your conclusions and definitely will thirstily look forward to your next updates.
ReplyDeletewebsite builder for reseller
Thank you for the link building list.I am going jot down this because it will help me a lot.Great blog! Please keep on posting such blog.
ReplyDeleteprivate label website builder
Comfortabl y, the post is really the freshest on that deserving topic. I harmonise with your conclusions and definitely will thirstily look forward to your next updates.
ReplyDeletewhite label website builder