HTML grid positioning - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Position

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Position

Description

HTML grid positioning

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsu</title> 
  <style>
#wrapper {<!--from w  ww .  j  a  v  a2 s  .  c o  m-->
   display:grid;
   grid-gap:11px;
   grid-template-columns:51px 51px 51px;
   grid-template-rows:31px 4px 28px 14px 18px 41px;
   grid-template-areas:"one two three"
   "one five three"
   "one five six"
   "four five six"
   "four five ."
   "four . .";
}

#wrapper>div {
   background-color:Chartreuse;
}

.d_1 {
   grid-area:one;
}

.d_2 {
   grid-area:two;
}

.d_3 {
   grid-area:three;
}

.d_4 {
   grid-area:four;
}

.d_5 {
   grid-area:five;
}

.d_6 {
   grid-area:six;
}
</style> 
 </head> 
 <body translate="no"> 
  <div id="wrapper"> 
   <div class="d_1">
     Lor 
   </div> 
   <div class="d_2">
     Lor 
   </div> 
   <div class="d_3">
     Lor 
   </div> 
   <div class="d_4">
     Lor 
   </div> 
   <div class="d_5">
     Lor 
   </div> 
   <div class="d_6">
     Lor 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials