CSS Grid with dynamic heights for columns and growing rows - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Column Layout

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

Description

CSS Grid with dynamic heights for columns and growing rows

Demo Code

ResultView the demo in separate window 

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

.grid {<!--from w  w w . j a  va 2 s. c o  m-->
   display: grid;
   margin: auto;
   width:calc(645px + 316px + 20px);
   grid-template-columns: 645px 316px;
   grid-template-rows: min-content 1fr min-content min-content;
   grid-column-gap: 20px;
}
.top {
   grid-column: 1 / 2;
   background-color: green;
}
.right {
   grid-column: 2;
   grid-row: 1 / span 4;
   background-color: blue;
}
.bottom {
   grid-column: 1;
   background-color: red;
}
.footer {
   height: 50px;
   background-color: pink;
   grid-column: 1 /-1;
   grid-row: 4;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="grid"> 
   <div class="top">
     top 
    <br> top second line 
    <br> 
   </div> 
   <div class="right"> 
   </div> 
   <div class="bottom">
     bottom a 
    <br> a 
    <br> a 
    <br> a 
    <br> a 
    <br> a 
    <br> a 
    <br> a 
    <br> a 
    <br> a 
    <br> a 
    <br> a 
    <br> a 
    <br> a 
    <br> a 
    <br> a 
    <br> a 
    <br> a 
    <br> a 
    <br> 
   </div> 
   <div class="footer">
     Footer 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials