Set up Grid auto columns - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Column Layout

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

Description

Set up Grid auto columns

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

* {box-sizing: border-box;}
.grid {<!--  w w  w . ja  v  a2 s. c  om-->
   grid: auto-flow dense / 1fr 1fr;
   display: grid;
   grid-gap: 20px;
}
.content {
   grid-column: 1;
   background: red;
}
.sidebar {
   grid-column: 2;
   background: blue;
}
.box {
   width: 50%;
   height: 75px;
   background-color: black;
   color: #fff;
   padding: 20px;
   position: relative;
   float: left;
}
.box100{
   width: 100%;
   height: 75px;
   color: #fff;
   padding: 20px;
}
.box.arrow-left:after {
   content: " ";
   position: absolute;
   left: -15px;
   margin-top:-15px;
   top: 50%;
   border-top: 15px solid transparent;
   border-right: 15px solid black;
   border-left: none;
   border-bottom: 15px solid transparent;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="grid"> 
   <div class="content"> 
    <div class="box" style="background:gray">
      DIV 1 (50% of column 1) 
    </div> 
    <div class="box arrow-left">
      DIV 2 (50% of column 1) 
    </div> 
   </div> 
   <div class="sidebar"> 
    <div class="box100">
      DIV 3 (100% of column 2) 
    </div> 
   </div> 
  </div> 
  <div> 
   <div class="content" style="background:tomato"> 
    <p>this is a test tes test test test</p> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials