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;.

 

Comments on “How to create an Equal height grids using flex

  1. Thank you for the blog post. Thomas and I have been saving to
    buy a new e-book on this subject and your post has made people like us
    to save all of our money. Your ideas really solved all our issues.
    In fact, more than what we had thought of before we ran into your amazing blog.
    My partner and i no longer nurture doubts including a troubled mind because you have
    really attended to all of our needs right here. Thanks

  2. Hey, you used to write fantastic, but the last few posts have been kinda boring?K I miss your super writings. Past several posts are just a bit out of track! come on!

Leave a Reply

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