Create a flexible adaptive table-like layout - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Layout

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

Description

Create a flexible adaptive table-like layout

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>  Paulie-D</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
  <style>

* {<!-- w w w  .  j a v  a 2s. c o m-->
   box-sizing: border-box;
}
.wrapper {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
   width: 80%;
   margin: auto;
   border:1px solid red;
   padding: 1em;
}
.box {
   border: 1px solid grey;
   min-height: 1em;
   margin-bottom: 1em;
   padding: 0 1em;
   flex: 1 0 100%;
   background: #c0ffee;
}
@media screen and (min-width: 500px) {
   .box {
      flex: 0 0 48%;
      background: #bada55;
   }
}
@media screen and (min-width: 750px) {
   .box {
      flex: 0 0 30%;
      background: rebeccapurple;
   }
}
@media screen and (min-width: 1000px) {
   .box {
      flex: 0 0 24%;
      background: #b19d09;
   }
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="wrapper"> 
   <div class="box"> 
    <p>Lorem ipsum dolor sit.</p> 
   </div> 
   <div class="box"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, totam.</p> 
   </div> 
   <div class="box"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, cum. Voluptate natus quaerat eaque incidunt, accusamus veniam facere, alias provident odio est rerum commodi?</p> 
   </div> 
   <div class="box"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, dolore.</p> 
   </div> 
   <div class="box"> 
    <p>Lorem ipsum dolor sit.</p> 
   </div> 
   <div class="box"> 
    <p>lorem</p> 
   </div> 
   <div class="box"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus nobis odit possimus porro. Nihil, modi.</p> 
   </div> 
   <div class="box"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium vel, accusamus cupiditate esse quisquam, nisi hic dolores assumenda adipisci, illum ab itaque nemo placeat! Dolorum aliquam iure veritatis reprehenderit libero.</p> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials