Grid-template-areas property aligning grid items - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Grid

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Grid

Description

Grid-template-areas property aligning grid items

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum dol</title> 
  <style>
body {<!--from  ww  w . j a v  a2  s.com-->
   padding-top:21px;
   background:Chartreuse;
}

.container {
   display:grid;
   width:100%;
   max-width:751px;
   margin:0 auto;
   grid-template-columns:repeat(4, 2fr);
   grid-gap:21px;
   grid-template-areas:"header   header   header"
   "main     main     main"
   "footer   footer   footer";
}

.container div {
   color:yellow;
   font-size:21px;
   padding:21px;
}

.header {
   background:blue;
   grid-area:header;
}

.main {
   background:pink;
   grid-area:main;
   display:grid;
   grid-template-columns:repeat(4, 2fr);
   grid-template-rows:auto;
   grid-gap:21px;
}

.bigimg {
   background:OrangeRed;
   grid-column:span 3;
}

.blogart {
   background:grey;
}

.footer {
   background:BlueViolet;
   grid-area:footer;
}
</style> 
 </head> 
 <body translate="no"> 
  <section class="container"> 
   <div class="header">
     Lorem ip 
   </div> 
   <div class="main"> 
    <div class="bigimg">
      Lorem 
    </div> 
    <div class="blogart">
      Lorem ips 
    </div> 
    <div class="blogart">
      Lorem ips 
    </div> 
    <div class="blogart">
      Lorem ips 
    </div> 
    <div class="blogart">
      Lorem ips 
    </div> 
   </div> 
   <div class="footer">
     Lorem ip 
   </div> 
  </section>  
 </body>
</html>

Related Tutorials