Grid row that expands in height only when necessary - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Row

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Table Row

Description

Grid row that expands in height only when necessary

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">
.myGrid {<!--from  ww w.  j a va  2  s .  c o m-->
   display:grid;
   max-height:351px;
   grid-template-rows:auto 48px;
   grid-template-columns:2fr 3.6fr;
   grid-template-areas:"a b" "c c";
}

.left {
   min-height:251px;
   max-height:304px;
   grid-area:a;
   background-color:Chartreuse;
}

.right {
   min-height:251px;
   max-height:304px;
   grid-area:b;
   background-color:yellow;
}

.bottom {
   grid-area:c;
   background-color:blue;
}

body {
   margin:0;
}
</style> 
 </head> 
 <body> 
  <div class="myGrid"> 
   <div class="left"></div> 
   <div class="right"></div> 
   <div class="bottom"></div> 
  </div>  
 </body>
</html>

Related Tutorials