How to create an Equal height grids using flex

equal height blocks using flex

You can easily create a equal height blocks. Flex box layout using a set of CSS properties designed for this task. Flex box is used to add padding, border, and margin to the child elements without needing to worry about a column spelling over to the next row.

In this demo we are creating three columns of equal width, equal height, and fixed-pixel margin between them, as well as any amount of padding by using flex.

HTML

<div class="container">
<br/><br/>
<section>
  <div class="row">      
	  <div class="card">		 
	    <div class="card-cp">
		  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of   </p>
		</div>  
	  </div> 
	  <div class="card">		 
		 <div class="card-cp">
		  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of   </p>
		</div>  
	  </div> 
	  <div class="card">		 
		 <div class="card-cp">
		  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of   </p>
		</div>  
	  </div> 
	  <div class="card">		 
		 <div class="card-cp">
		  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of   </p>
		</div>  
	  </div> 
	  <div class="card">		 
		 <div class="card-cp">
		  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of   </p>
		</div>  
	  </div> 	  
  </div>
 </section>
</div>

CSS

body{background:#f1f1f1;}
section{background:#fff;padding:40px;}
.card{flex:1;}
.row .card{margin:0 15px;}	
.profile{margin-top:80px;}
.profile a{position: absolute;
bottom: 20px;}
@media(max-width:768px){
.card{flex:100%;}
}

 

equal blocks
Equal blocks/boxes using flex without height

 

Apply display utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.

we created classes like .card, .profile. In class (.card) we defined flex:1 to diplay equal height boxes. In class (.profile) we defined properties like margin-top : 80px; we also created a button and we used properties like position : absolute and bottom : 20px;.

 

Leave a Reply

Your email address will not be published. Required fields are marked *