Create a two column layout with a vertically expanding container - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:2 Column

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

Description

Create a two column layout with a vertically expanding container

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>2 column layout: flexbox - vertical wrap</title> 
  <style>

.container {<!--   w  w w .  java2  s  .co m-->
   background: rgba(0,0,0,0.1);
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   min-height: 200px;
   width: 600px;
}
.columns {
   column-count: 2;
   column-gap: 0;
   flex: 1;
}
.item {
   display: block;
   box-sizing: border-box;
   padding: 10px;
   border: 1px solid blue;
   width: 100%;
   -webkit-column-break-inside: avoid;
   /* Chrome, Safari, Opera */
   page-break-inside: avoid;
   /* Firefox */
   break-inside: avoid;
   /* IE 10+ */
}
.containerExpanded {
   height: 320px;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="container containerExpanded"> 
   <div class="item">
     1 
   </div> 
   <div class="item">
     2 
   </div> 
   <div class="item">
     3 
   </div> 
   <div class="item">
     4 
   </div> 
   <div class="item">
     5 
   </div> 
   <div class="item">
     6 
   </div> 
   <div class="item">
     7 
   </div> 
   <div class="item">
     8 
   </div> 
   <div class="item">
     9 
   </div> 
   <div class="item">
     10 
   </div> 
   <div class="item">
     11 
   </div> 
   <div class="item">
     12 
   </div> 
   <div class="item">
     13 
   </div> 
   <div class="item">
     14 
   </div> 
   <div class="item">
     15 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials