Create flexbox grid with 2 rows and 3 columns - 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 flexbox grid with 2 rows and 3 columns

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">

*{ box-sizing: border-box; }
.port-folio h2{ text-align: center; }
.portfolio-col {<!--   w w  w  .java  2s .c  o  m-->
   text-align: center;
   overflow: hidden;
   padding: 5px;
   clear: both;
}
.port-folio ul{ list-style: none; padding: 0; margin: 25px 0 0; }
.port-folio ul li{ display: block; }
.col{
   width: 31.33%;
   border: 1px solid black;
   float: left;
   padding: 5px;
   margin: 15px 1%;
}


      </style> 
 </head> 
 <body> 
  <section class="port-folio" id="portfolio"> 
   <div class="container"> 
    <h2>MY PROJECTS</h2> 
    <div class="portfolio-col"> 
     <div class="col span_1_of_3"> 
      <img src="https://www.java2s.com/style/demo/InternetExplorer.png" alt="Smiley face"> 
      <ul class="project-info"> 
       <li>Name: Player</li> 
       <li>Created By: Doe</li> 
       <li>Date: August 2017</li> 
       <li>Language: Java</li> 
       <li> <a href="">More Info</a> </li> 
      </ul> 
     </div> 
     <div class="col span_1_of_3"> 
      <img src="https://www.java2s.com/style/demo/Opera.png" alt="Smiley face"> 
      <ul class="project-info"> 
       <li>Name: Game</li> 
       <li>Created By: Doe</li> 
       <li>Date: August 2017</li> 
       <li>Language: XML</li> 
       <li> <a href="">More Info</a> </li> 
      </ul> 
     </div> 
     <div class="col span_1_of_3"> 
      <img src="https://www.java2s.com/style/demo/Firefox.png" alt="Smiley face"> 
      <ul class="project-info"> 
       <li>Name: Game</li> 
       <li>Created By: Doe</li> 
       <li>Date: August 2017</li> 
       <li>Language: XML</li> 
       <li> <a href="">More Info</a> </li> 
      </ul> 
     </div> 
     <div class="col span_1_of_3"> 
      <img src="https://www.java2s.com/style/demo/Google-Chrome.png" alt="Smiley face"> 
      <ul class="project-info"> 
       <li>Name: Game</li> 
       <li>Created By: Doe</li> 
       <li>Date: August 2017</li> 
       <li>Language: Java</li> 
       <li> <a href="">More Info</a> </li> 
      </ul> 
     </div> 
     <br> 
     <div class="col span_1_of_3"> 
      <img src="https://www.java2s.com/style/demo/InternetExplorer.png" alt="Smiley face"> 
      <ul class="project-info"> 
       <li>Name: Game</li> 
       <li>Created By: Doe</li> 
       <li>Date: August 2017</li> 
       <li>Language: Java</li> 
       <li> <a href="">More Info</a> </li> 
      </ul> 
     </div> 
     <div class="col span_1_of_3"> 
      <img src="https://www.java2s.com/style/demo/InternetExplorer.png" alt="Smiley face"> 
      <ul class="project-info"> 
       <li>Name: Game</li> 
       <li>Created By: Doe</li> 
       <li>Date: August 2017</li> 
       <li>Language: Java</li> 
       <li> <a href="">More Info</a> </li> 
      </ul> 
     </div> 
    </div> 
   </div> 
  </section>  
 </body>
</html>

Related Tutorials