Create Flex Layout with mixed rows and column - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Column

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

Description

Create Flex Layout with mixed rows and column

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
main {<!-- w  w  w.  j  a  v  a 2  s .  c o  m-->
   display:grid;
   grid-template-columns:repeat(11, 2fr);
   row-gap:11px;
   width:100%;
}

.a {
   background:red;
   grid-area:2 / 2 / 4 / 4;
}

.b,
.c {
   grid-column:4 / 12;
   background:green;
   overflow:hidden;
   height:46px;
}

.b {
   grid-row-start:2;
}

.c {
   grid-row-start:3;
   background:lightblue;
}
</style> 
 </head> 
 <body translate="no"> 
  <main> 
   <div class="a">
     column 
   </div> 
   <div class="b">
     row1 
   </div> 
   <div class="c">
     row2 
   </div> 
  </main>  
 </body>
</html>

Related Tutorials