Css grids auto span available space - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Grid

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Grid

Description

Css grids auto span available space

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
.flex-wrapper {<!--   ww  w  .  j av  a2  s  .c  o m-->
   display:flex;
   flex:2;
   flex-wrap:wrap;
}

.block1, .block2 {
   min-width:301px;
   height:51px;
   flex-grow:2;
}

.block1 {
   width:34.334%;
   background-color:Chartreuse;
}

.block2 {
   width:67.6667%;
   background-color:yellow;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="flex-wrapper"> 
   <div class="block1"></div> 
   <div class="block2"></div> 
  </div>  
 </body>
</html>

Related Tutorials