Free CSS Responsive Grid Template 1

CSS Grid Template 1

Source Code

<!doctype html>
<title>CSS Grid Template 1</title>
body {
  display: grid;
    "header header header"
    "nav article ads"
    "nav 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-rows: 80px 1fr 70px 1fr 70px;
    grid-template-columns: 1fr;
  <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>


  1. Thanks for the useful information, give more updates like First time I visit your site really nice, here after a daily visit.
    ecommerce website development company in chennai

  2. Thankyou for this article bro, it helps a lot. visit my site for Minneapolis Web Design


Post a Comment

Popular posts from this blog

Multi-tap Keypad Text Entry

HTML5 Crossword 1