Layout all elements aligned to the same grid and spanning multiple columns - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Column Layout

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

Description

Layout all elements aligned to the same grid and spanning multiple columns

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

#main {<!--from  w ww .j  ava 2 s. com-->
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
   width: 100%;
}
#main div {
   flex: 0 0 150px;
   height: 100px;
   margin: 5px;
   background-color: #ccc;
   border: 1px dashed black;
}
#main div:nth-child(2) { order: -4; background-color: lightblue; }
#main div:nth-child(5) { order: -3; background-color: lightgreen; }
#main div:nth-child(8) { order: -2; background-color: lightyellow; }
#main div:nth-child(11) { order: -1; background-color: lightpink; flex-basis: calc(300px + 10px); }
#main div:nth-child(7) { flex-basis: calc(450px + 20px); }
@media screen and (max-width: 500px) {
   #main div:nth-child(11) { flex-basis: 150px; }
   #main div:nth-child(7)  { flex-basis: 150px; }
}


      </style> 
 </head> 
 <body> 
  <div id="main"> 
   <div>
     div 1 
   </div> 
   <div>
     div 2 
   </div> 
   <div>
     div 3 
   </div> 
   <div>
     div 4 
   </div> 
   <div>
     div 5 
   </div> 
   <div>
     div 6 
   </div> 
   <div>
     div 7 
   </div> 
   <div>
     div 8 
   </div> 
   <div>
     div 9 
   </div> 
   <div>
     div 10 
   </div> 
   <div>
     div 11 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials