How to create an equal height columns or grids using flex

equal height blocks using flex

You can easily create equal height columns, grids, and blocks using CSS flex. Flexbox layout using a set of CSS properties designed for this task. Flexbox 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.

Equal Height using flex

In this demo, we are creating three columns of equal width, equal height, and the 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

 

Create equal height columns using flex by applying 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 display 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;.