Column Grid full example(Responsive)

https://www.quackit.com/html/templates/css_grid_templates.cfm

PreviousAll CSS Grid Properties (ok)Next=== Start Điều quan trọng nhất cách chia cột và thay đổi vị trí ===

Last updated 2 years ago

Was this helpful?

Column Grid full example(Responsive)

https://www.quackit.com/html/templates/css_grid_templates.cfm

<!doctype html>
<title>Example</title>
<style>
.grid {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 10px;
}
.box {
  color: white;
  font-size: 4vw;
  padding: 10px;
  background: gold;
  text-align: center;
}
.box:nth-child(1) {
  grid-column: span 12;
  }
.box:nth-child(2), 
.box:nth-child(3) {
  grid-column: span 6;
  }
.box:nth-child(4),
.box:nth-child(5),
.box:nth-child(6) {
  grid-column: span 4;
  }
.box:nth-child(7),
.box:nth-child(8),
.box:nth-child(9),
.box:nth-child(10) {
  grid-column: span 3;
  }
.box:nth-child(11),
.box:nth-child(12),
.box:nth-child(13),
.box:nth-child(14),
.box:nth-child(15),
.box:nth-child(16) {
  grid-column: span 2;
  }
@media screen and (max-width: 575px) {
    .grid {
      display: block;
      }
    .box {
      margin: 10px 0;
    }
  }
</style>
<main class="grid">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
  <div class="box">11</div>
  <div class="box">12</div>
  <div class="box">13</div>
  <div class="box">14</div>
  <div class="box">15</div>
  <div class="box">16</div>
  <div class="box">17</div>
  <div class="box">18</div>
  <div class="box">19</div>
  <div class="box">20</div>
  <div class="box">21</div>
  <div class="box">22</div>
  <div class="box">23</div>
  <div class="box">24</div>
  <div class="box">25</div>
  <div class="box">26</div>
  <div class="box">27</div>
  <div class="box">28</div>
</main>

12 Column Grid (Mobile First)

<!doctype html>
<title>Example</title>
<style>
  .grid {
    display: block;
    }
  .box {
    color: white;
    font-size: 4vw;
    padding: 10px;
    background: yellowgreen;
    margin: 10px 0;
    text-align: center;
    }
  @media screen and (min-width: 576px) {
    .grid {
      display: grid;
      grid-template-rows: repeat(6, 1fr);
      grid-template-columns: repeat(12, 1fr);
      grid-gap: 10px;
      }
    .box {
      margin: 0;
      }
    .box:nth-child(1) {
      grid-column: span 12;
      }
    .box:nth-child(2), 
    .box:nth-child(3) {
      grid-column: span 6;
      }
    .box:nth-child(4),
    .box:nth-child(5),
    .box:nth-child(6) {
      grid-column: span 4;
      }
    .box:nth-child(7),
    .box:nth-child(8),
    .box:nth-child(9),
    .box:nth-child(10) {
      grid-column: span 3;
      }
    .box:nth-child(11),
    .box:nth-child(12),
    .box:nth-child(13),
    .box:nth-child(14),
    .box:nth-child(15),
    .box:nth-child(16) {
      grid-column: span 2;
      }
    }
</style>
<main class="grid">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
  <div class="box">11</div>
  <div class="box">12</div>
  <div class="box">13</div>
  <div class="box">14</div>
  <div class="box">15</div>
  <div class="box">16</div>
  <div class="box">17</div>
  <div class="box">18</div>
  <div class="box">19</div>
  <div class="box">20</div>
  <div class="box">21</div>
  <div class="box">22</div>
  <div class="box">23</div>
  <div class="box">24</div>
  <div class="box">25</div>
  <div class="box">26</div>
  <div class="box">27</div>
  <div class="box">28</div>
</main>

12 Column Grid Example 2 (Responsive)

<!doctype html>
<title>Example</title>
<style>
  .grid {
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 10px;
  }
  .box {
    color: white;
    padding: 7px;
    background: gold;
    text-align: center;
    }
  .box:nth-child(2),
  .box:nth-child(21) {
    grid-column: span 11;
    }
  .box:nth-child(3),
  .box:nth-child(20) {
    grid-column: span 2;
    }
  .box:nth-child(4),
  .box:nth-child(19) {
    grid-column: span 10;
    }
  .box:nth-child(5),
  .box:nth-child(18) {
    grid-column: span 3;
    }
  .box:nth-child(6),
  .box:nth-child(17) {
    grid-column: span 9;
    }
  .box:nth-child(7),
  .box:nth-child(16) {
    grid-column: span 4;
    }
  .box:nth-child(8),
  .box:nth-child(15) {
    grid-column: span 8;
    }
  .box:nth-child(9),
  .box:nth-child(14) {
    grid-column: span 5;
    }
  .box:nth-child(10),
  .box:nth-child(13) {
    grid-column: span 7;
    }
  .box:nth-child(11),
  .box:nth-child(12) {
    grid-column: span 6;
    }
  @media screen and (max-width: 575px) {
    .grid {
      display: block;
    }
    .box {
      margin: 10px 0;
    }
  }
</style>
<main class="grid">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
  <div class="box">11</div>
  <div class="box">12</div>
  <div class="box">13</div>
  <div class="box">14</div>
  <div class="box">15</div>
  <div class="box">16</div>
  <div class="box">17</div>
  <div class="box">18</div>
  <div class="box">19</div>
  <div class="box">20</div>
  <div class="box">21</div>
  <div class="box">22</div>
</main>

12 Column Grid Example 2 (Mobile First)

<!doctype html>
<title>Example</title>
<style>
  .grid {
    display: block;
  }
  .box {
    color: white;
    padding: 7px;
    background: yellowgreen;
    margin: 10px 0;
    text-align: center;
  }
  @media screen and (min-width: 576px) {
    .grid {
      display: grid;
      grid-template-rows: repeat(6, 1fr);
      grid-template-columns: repeat(12, 1fr);
      grid-gap: 10px;
    }
    .box {
      margin: 0;
    }
    .box:nth-child(2),
    .box:nth-child(21) {
      grid-column: span 11;
      }
    .box:nth-child(3),
    .box:nth-child(20) {
      grid-column: span 2;
      }
    .box:nth-child(4),
    .box:nth-child(19) {
      grid-column: span 10;
      }
    .box:nth-child(5),
    .box:nth-child(18) {
      grid-column: span 3;
      }
    .box:nth-child(6),
    .box:nth-child(17) {
      grid-column: span 9;
      }
    .box:nth-child(7),
    .box:nth-child(16) {
      grid-column: span 4;
      }
    .box:nth-child(8),
    .box:nth-child(15) {
      grid-column: span 8;
      }
    .box:nth-child(9),
    .box:nth-child(14) {
      grid-column: span 5;
      }
    .box:nth-child(10),
    .box:nth-child(13) {
      grid-column: span 7;
      }
    .box:nth-child(11),
    .box:nth-child(12) {
      grid-column: span 6;
      }
  }
</style>
<main class="grid">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
  <div class="box">11</div>
  <div class="box">12</div>
  <div class="box">13</div>
  <div class="box">14</div>
  <div class="box">15</div>
  <div class="box">16</div>
  <div class="box">17</div>
  <div class="box">18</div>
  <div class="box">19</div>
  <div class="box">20</div>
  <div class="box">21</div>
  <div class="box">22</div>
</main>

12 Column Vertical Grid (Responsive)

<!doctype html>
<title>Example</title>
<style>
  .grid {
    display: grid;
    grid-template-rows: repeat(12, 1fr);
    grid-template-columns: repeat(6, 1fr);
    grid-auto-flow: column;
    grid-gap: 10px;
    }
  .box {
    color: white;
    font-size: 2vh;
    padding: 10px;
    background: gold;
    margin: 0;
    text-align: center;
    }
  .box:nth-child(1) {
    grid-row: span 12;
    }
  .box:nth-child(2), 
  .box:nth-child(3) {
    grid-row: span 6;
    }
  .box:nth-child(4),
  .box:nth-child(5),
  .box:nth-child(6) {
    grid-row: span 4;
    }
  .box:nth-child(7),
  .box:nth-child(8),
  .box:nth-child(9),
  .box:nth-child(10) {
    grid-row: span 3;
    }
  .box:nth-child(11),
  .box:nth-child(12),
  .box:nth-child(13),
  .box:nth-child(14),
  .box:nth-child(15),
  .box:nth-child(16) {
    grid-row: span 2;
    }
  @media screen and (max-width: 575px) {
    .grid {
      display: block;
      }
    .box {
      margin: 10px 0;
    }
    }
</style>
<main class="grid">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
  <div class="box">11</div>
  <div class="box">12</div>
  <div class="box">13</div>
  <div class="box">14</div>
  <div class="box">15</div>
  <div class="box">16</div>
  <div class="box">17</div>
  <div class="box">18</div>
  <div class="box">19</div>
  <div class="box">20</div>
  <div class="box">21</div>
  <div class="box">22</div>
  <div class="box">23</div>
  <div class="box">24</div>
  <div class="box">25</div>
  <div class="box">26</div>
  <div class="box">27</div>
  <div class="box">28</div>
</main>

12 Column Vertical Grid (Mobile First)

<!doctype html>
<title>Example</title>
<style>
  .grid {
    display: block;
    }
  .box {
    color: white;
    font-size: 2vh;
    padding: 10px;
    background: yellowgreen;
    margin: 10px 0;
    text-align: center;
    }
  @media screen and (min-width: 576px) {
    .grid {
      display: grid;
      grid-template-rows: repeat(12, 1fr);
      grid-template-columns: repeat(6, 1fr);
      grid-auto-flow: column;
      grid-gap: 10px;
      }
    .box {
      margin: 0;
      }
    .box:nth-child(1) {
      grid-row: span 12;
      }
    .box:nth-child(2), 
    .box:nth-child(3) {
      grid-row: span 6;
      }
    .box:nth-child(4),
    .box:nth-child(5),
    .box:nth-child(6) {
      grid-row: span 4;
      }
    .box:nth-child(7),
    .box:nth-child(8),
    .box:nth-child(9),
    .box:nth-child(10) {
      grid-row: span 3;
      }
    .box:nth-child(11),
    .box:nth-child(12),
    .box:nth-child(13),
    .box:nth-child(14),
    .box:nth-child(15),
    .box:nth-child(16) {
      grid-row: span 2;
      }
    }
</style>
<main class="grid">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
  <div class="box">11</div>
  <div class="box">12</div>
  <div class="box">13</div>
  <div class="box">14</div>
  <div class="box">15</div>
  <div class="box">16</div>
  <div class="box">17</div>
  <div class="box">18</div>
  <div class="box">19</div>
  <div class="box">20</div>
  <div class="box">21</div>
  <div class="box">22</div>
  <div class="box">23</div>
  <div class="box">24</div>
  <div class="box">25</div>
  <div class="box">26</div>
  <div class="box">27</div>
  <div class="box">28</div>
</main>

Grid Layout 1

<!doctype html>
<title>CSS Grid Template 1</title>
<style>
body { 
  display: grid;
  grid-template-areas: 
    "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-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>

Grid Layout 2

<!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>

Grid Layout 3

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

Grid Layout 4

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

Grid Layout 5

<!doctype html>
<title>CSS Grid Template 5</title>
<style>
body { 
  display: grid;
  grid-template-areas: 
    "nav 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-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>

Grid Layout 6

<!doctype html>
<title>CSS Grid Template 6</title>
<style>
body { 
  display: grid;
  grid-template-areas: 
    "header header"
    "nav article"
    "nav ads"
    "footer footer";
  grid-template-rows: 80px 1fr 70px 70px;  
  grid-template-columns: 20% 1fr;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  height: 100vh;
  margin: 0;
  }  
header, footer, article, nav, div {
  padding: 1.2em;
  background: yellowgreen;
  }
#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>

Grid Layout 7

<!doctype html>
<title>CSS Grid Template 7</title>
<style>
body { 
  display: grid;
  grid-template-areas: 
    "nav header"
    "nav article"
    "nav ads"
    "nav footer";
  grid-template-rows: 80px 1fr 70px 70px;  
  grid-template-columns: 20% 1fr;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  height: 100vh;
  margin: 0;
  }  
header, footer, article, nav, div {
  padding: 1.2em;
  background: yellowgreen;
  }
#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>

Grid Layout 8

<!doctype html>
<title>CSS Grid Template 8</title>
<style>
body { 
  display: grid;
  grid-template-areas: 
    "header header"
    "ads article"
    "nav article"
    "nav footer";
  grid-template-rows: 80px 120px 1fr 70px;  
  grid-template-columns: 20% 1fr;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  height: 100vh;
  margin: 0;
  }  
header, footer, article, nav, div {
  padding: 1.2em;
  background: yellowgreen;
  }
#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>

Grid Layout 9

<!doctype html>
<title>CSS Grid Template 9</title>
<style>
body { 
  display: grid;
  grid-template-areas: 
    "header header"
    "nav article"
    "ads article"
    "ads footer";
  grid-template-rows: 80px 1fr 120px 70px;  
  grid-template-columns: 20% 1fr;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  height: 100vh;
  margin: 0;
  }  
header, footer, article, nav, div {
  padding: 1.2em;
  background: yellowgreen;
  }
#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>

Grid Layout 10

<!doctype html>
<title>CSS Grid Template 10</title>
<style>
body { 
  display: grid;
  grid-template-areas: 
    "header header ads"
    "nav article article"
    "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: yellowgreen;
  }
#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>

Grid Layout 11

<!doctype html>
<title>Example</title>
<style>
#grid {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  height: 100vh;
  margin: 0;
}
#grid > div {
  color: white;
  font-size: 4vw;
  padding: 10px;
  background: gold;
}
#grid > div:nth-child(1) {
  grid-column: span 4;
  }
#grid > div:nth-child(2) {
  grid-row: span 4;
  }
#grid > div:nth-child(4) {
  grid-column: span 2;
  }
#grid > div:nth-child(5) {
  grid-column: span 2;
  }
#grid > div:nth-child(10) {
  grid-column: span 3;
  }
</style>
<body id="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</body>

Grid Layout 12

<!doctype html>
<title>Example</title>
<style>
#grid {
  display: grid;
  grid-template-rows: 50vh repeat(4, 1fr);
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  height: 100vh;
  margin: 0;
}
#grid > div {
  color: white;
  font-size: 4vw;
  padding: 10px;
  background: gold;
}
#grid > div:nth-child(1) {
  grid-column: span 4;
  }
#grid > div:nth-child(2) {
  grid-row: span 4;
  }
#grid > div:nth-child(4) {
  grid-row: span 2;
  }
#grid > div:nth-child(5) {
  grid-row: span 3;
  }
#grid > div:nth-child(6) {
  grid-row: span 3;
  }
</style>
<body id="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</body>

Form with Auto Placement

<!doctype html>
<title>Form template with CSS grid auto placement</title>
<link href="https://fonts.googleapis.com/css?family=Unkempt" rel="stylesheet">
<style>
  .myForm > * {
   font: 1.4em 'Unkempt', sans-serif; 
  }
  .myForm {
    display: grid;
    grid-template-columns: [labels] auto [controls] 1fr;
    grid-auto-flow: row;
    grid-gap: .8em .5em;
    background: beige;
    padding: 1.2em;
    width: 36em;
  }
  .myForm > label,
  .myForm > fieldset  {
    grid-column: labels;
    grid-row: auto;
  }
  .myForm > input, 
  .myForm > select,
  .myForm > textarea {
    grid-column: controls;
    grid-row: auto;
    padding: .4em;
    border: 0;
  }
  .myForm > fieldset,
  .myForm > button {
    grid-column: span 2;
  }  
  .myForm > button {
    padding: 1em;
    background: darkkhaki;
    border: 0;
    color: white;
    }
  .myForm > textarea {
    min-height: 3em;
    }
</style>
<form class="myForm">
  <label for="customer_name">Name </label>
  <input type="text" name="customer_name" id="customer_name" required>

  <label for="phone_number">Phone </label>
  <input type="tel" name="phone_number" id="phone_number">

  <label for="email_address">Email </label>
  <input type="email" name="email_address" id="email_address">

  <fieldset>
    <legend>Which taxi do you require?</legend>
    <label> <input type="radio" name="taxi" id="taxi_car" required value="car"> Car </label>
    <label> <input type="radio" name="taxi" id="taxi_van" required value="van"> Van </label>
    <label> <input type="radio" name="taxi" id="taxi_tuk" required value="tuktuk"> Tuk Tuk </label>
  </fieldset>

  <fieldset>
    <legend>Extras</legend>
    <label> <input type="checkbox" name="extras" id="extras_baby" value="baby"> Baby Seat </label>
    <label> <input type="checkbox" name="extras" id="extras_wheel" value="wheelchair"> Wheelchair Access </label>
    <label> <input type="checkbox" name="extras" id="extras_tip" value="tip"> Stock Tip </label>
  </fieldset>

  <label for="pickup_time">Pickup Date/Time</label>
  <input type="datetime-local" name="pickup_time" id="pickup_time" required>

  <label for="pickup_place">Pickup Place</label>
  <select name="pickup_place" id="pickup_place">
    <option value="" selected="selected">Select One</option>
    <option value="office" >Taxi Office</option>
    <option value="town_hall" >Town Hall</option>
    <option value="telepathy" >We'll Guess!</option>
  </select>

  <label for="dropoff_place">Dropoff Place</label>
  <input type="text" name="dropoff_place" id="dropoff_place" required list="destinations">

  <datalist id="destinations">
    <option value="Airport">
    <option value="Beach">
    <option value="Fred Flinstone's House">
  </datalist>

  <label for="comments">Special Instructions</label>
  <textarea name="comments" id="comments" maxlength="500"></textarea>

  <button>Submit Booking</button>

</form>

Nested Grid

<!doctype html>
<title>Example</title>
<style>
#outer-grid {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}
#outer-grid > div {
  background-color: red;
  color: white;
  font-size: 4vw;
  padding: 10px;
}
#inner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
}
#inner-grid > div {
  background: salmon;
  padding: 10px;
}
</style>
<div id="outer-grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div id="inner-grid">
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
</div>

Repeating Grid

<!doctype html>
<title>Example</title>
<style>
#grid {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
#grid > div {
  background-color: hotpink;
  color: white;
  font-size: 4vw;
  padding: 10px;
}
</style>
<div id="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

Repeating Grid with Span

<!doctype html>
<title>Example</title>
<style>
#grid {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
#grid > div {
  background-color: hotpink;
  color: white;
  font-size: 4vw;
  padding: 10px;
}
#grid > div:nth-child(1) {
  grid-column: span 2;
}
#grid > div:nth-child(2) {
  grid-row: span 4;
}
#grid > div:nth-child(9) {
  grid-column: span 3;
}  
</style>
<div id="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>