Getting to a one-column layout when grid items span 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

Getting to a one-column layout when grid items span multiple columns

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

.grid {<!--   w  ww .  j  a v a2s . c om-->
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
   background: red;
}
.span-2 {
   grid-column: span 2;
}
@media ( max-width: 500px ) {
   .grid   { grid-template-columns: 1fr; }
   .span-2 { grid-column: span 1;        }
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="grid"> 
   <div>
     1 
   </div> 
   <div>
     2 
   </div> 
   <div class="span-2">
     3 
   </div> 
   <div>
     4 
   </div> 
   <div>
     5 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials