Create tile layout with div - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:4 Column

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

Description

Create tile layout with div

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Grid by Example 23: Auto-placement and the order property</title> 
  <style>
body {<!--from  ww w .  jav a2s  .c o m-->
   margin:41px;
}

.box {
   background-color:Chartreuse;
   color:yellow;
   border-radius:6px;
   padding:21px;
   font-size:151%;
   order:2;
}

.box:nth-child(even) {
   background-color:blue;
   color:pink;
}

.wrapper {
   width:601px;
   display:grid;
   grid-template-columns:repeat(7, 100px);
   grid-gap:11px;
}

.box1 {
   order:4;
}

.box2 {
   order:3;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="wrapper"> 
   <div class="box box1">
     1 
   </div> 
   <div class="box box2">
     2 
   </div> 
   <div class="box box3">
     3 
   </div> 
   <div class="box box4">
     4 
   </div> 
   <div class="box box5">
     5 
   </div> 
   <div class="box box6">
     6 
   </div> 
   <div class="box box7">
     7 
   </div> 
   <div class="box box8">
     8 
   </div> 
   <div class="box box9">
     9 
   </div> 
   <div class="box box10">
     10 
   </div> 
   <div class="box box11">
     11 
   </div> 
   <div class="box box12">
     12 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials