Rearrange grid items within resized container keeping one tile constant - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Grid

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Grid

Description

Rearrange grid items within resized container keeping one tile constant

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ips</title> 
  <style>
* {<!--from w  w  w . j  a va 2 s. c  om-->
   padding:0;
   margin:0;
   box-sizing:border-box;
}

.wrapper {
   display:flex;
   width:100%;
   height:100%;
}

.wrapper .column {
   display:flex;
   flex-direction:column;
   flex-grow:var(--flex-grow,0);
}

.wrapper .column .item {
   flex-grow:var(--flex-grow,0);
}

.wrapper .column .item.main {
   width:201px;
   height:201px;
   min-width:201px;
   min-height:201px;
}

.wrapper .column:first-child .item {
   margin-left:0;
}

.wrapper .column:last-child .item {
   margin-right:0;
}

.wrapper .column .item:first-child {
   margin-top:0;
}

.wrapper .column .item:last-child {
   margin-bottom:0;
}

@import "http://fonts.googleapis.com/css?family=Roboto";
html,body {
   height:100%;
}

body {
   font-family:"Roboto";
   display:flex;
   justify-content:center;
   align-items:center;
}

.wrapper {
   resize:both;
   overflow:hidden;
}

.wrapper .column .item {
   display:flex;
   justify-content:center;
   align-items:center;
   text-align:center;
   border:2px solid Chartreuse;
   margin:5px;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="wrapper"> 
   <div class="column left" style="--flex-grow: 400"> 
    <div class="item" style="--flex-grow: 200">
      Lorem ips 
    </div> 
    <div class="item" style="--flex-grow: 400">
      Lorem ips 
    </div> 
   </div> 
   <div class="column center"> 
    <div class="item" style="--flex-grow: 200">
      Lorem ips 
    </div> 
    <div class="item main"> 
     <div> 
      <b>Lorem ips</b> 
      <br>Lorem ips 
     </div> 
    </div> 
    <div class="item" style="--flex-grow: 200">
      Lorem ips 
    </div> 
   </div> 
   <div class="column right" style="--flex-grow: 600"> 
    <div class="item" style="--flex-grow: 300">
      Lorem ips 
    </div> 
    <div class="item" style="--flex-grow: 300">
      Lorem ips 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials