Responsive Layout with same growing gaps in each row - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Layout

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

Description

Responsive Layout with same growing gaps in each row

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>Lore</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.container {<!--from   w w w . j a  v  a  2  s.  co  m-->
   min-height:401px;
   display:flex;
   flex-wrap:wrap;
   flex-direction:row;
   justify-content:space-around;
   align-items:center;
   align-content:flex-start;
}

.container:after {
   display:block;
   content:" invisible node ";
   margin-left:auto;
}

.item {
   flex:0 0 auto;
   margin:6px;
   width:51px;
   height:51px;
   background-color:Chartreuse;
}
</style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="item"></div> 
   <div class="item"></div> 
   <div class="item"></div> 
   <div class="item"></div> 
   <div class="item"></div> 
   <div class="item"></div> 
   <div class="item"></div> 
   <div class="item"></div> 
   <div class="item"></div> 
   <div class="item"></div> 
  </div>  
 </body>
</html>

Related Tutorials