CSS Grid with a wrapper in the middle - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Grid

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

Description

CSS Grid with a wrapper in the middle

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum dolor sit amet,</title> 
  <style>
body {<!--from   w  w w.  java2s. c  o m-->
   margin:11px;
   text-align:center;
   width:581px;
}

.cms-annoying-wrapper {
   display:contents;
}

.container {
   display:grid;
   grid-gap:6px;
   grid-template-areas:"header header header"
   "sidebar content content"
   "sidebar content content"
   "footer footer footer";
}

.item {
   color:Chartreuse;
   padding:2.6em 0;
   font-size:3em;
}

.header {
   background:yellow;
}

.sidebar {
   background:blue;
}

.content {
   background:pink;
}

.footer {
   background:OrangeRed;
}

.header {
   grid-area:header;
}

.sidebar {
   grid-area:sidebar;
}

.content {
   grid-area:content;
   height:181px;
}

.footer {
   grid-area:footer;
}
</style> 
 </head> 
 <body translate="no"> 
  <h1>Lorem ip</h1> 
  <div class="container"> 
   <div class="item header">
     Lorem ip 
   </div> 
   <div class="cms-annoying-wrapper">
     Lorem 
    <div class="item sidebar">
      Lorem ips 
    </div>Lor 
    <div class="item content">
      Lorem ips 
    </div>Lor 
   </div>Lor 
   <div class="item footer">
     Lorem ip 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials