<footer>
  <h1>Footer with 4 Cols</h1>
<div class="container">
   <div class="row">
       <div class="col">Contact</div>
       <div class="col">Posts</div>
       <div class="col">Trending</div>
       <div class="col">Movies</div>
       <div class="col">Privacy</div>
       <div class="col">Disclaimer</div>
  </div>
   
  <div class="row">
       <div class="col">Contact</div>
       <div class="col">Posts</div>
       <div class="col">Trending</div>
       <div class="col">Movies</div>
       <div class="col">Privacy</div>
       <div class="col">Disclaimer</div>
  </div>
  
   <div class="row">
       <div class="col">Contact</div>
       <div class="col">Posts</div>
       <div class="col">Trending</div>
       <div class="col">Movies</div>
       <div class="col">Privacy</div>
     <div class="col">Disclaimer</div>
  </div>
       <div class="row">
         <div class="col">Contact</div>
         <div class="col">Posts</div>
         <div class="col">Trending</div>
         <div class="col">Movies</div>
        <div class="col">Privacy</div>
     <div class="col">Disclaimer</div>
  </div>
</div>
 </footer>
footer{
   background-color:yellow;
}
h1{
  text-align:center;
  padding:1rem;
  margin-bottom:0;
  border-bottom:2px solid
}
.container{
   display:grid;
   padding:1rem;
   text-transform:capitalize;
   grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}

.row{
   padding:1rem;
   font-size:1.2rem; 
}
.col{
   background-color:#ffff;
   color:rgba(0,0,0,.7);
   cursor:pointer;
   text-align:center;
   padding:.7rem;
   box-shadow: 0 1px 10px black;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.