Number of Columns in a row using flex box and column count

number of columns in a row

Container is used to set the content’s margins dealing with the responsive behaviors of your layout.

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

The columns have been created by wrapping four DIV elements into one container DIV.

In this we are using a class called card in that we defined a property called

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>

css

body{background:#f1f1f1;}
section{background:#fff;padding:40px;}
.card{flex:0 25%;margin-bottom:30px !important;padding:15px;border:none;}
.profile{margin-top:80px;padding:5px;}
.profile a{position: absolute; bottom: 20px;}
.card-cp{background-color: #fff;background-clip:border-box;
border:1px solid rgba(0,0,0,.125);border-radius:.25rem;padding:15px;}
@media(max-width:1000px){.card{flex:0 50%;}}
@media(max-width:768px){.card{flex:0 100%;}}

 

the property flex:0 25% will defineds the first value must be a <number> and it is interpreted as <flex-grow>. The second value must be one of:

a <number>: then it is interpreted as <flex-shrink>. (or) a valid value for width: then it is interpreted as <flex-basis>.

flex:0 25% ; is used to create  four div elements (or) four flex boxes.
flex:0 33.33% is used to create  three flex boxes.
flex:0 50%    is used to create  two flex boxes.
flex:0 100%   is used to create one flex box.

Demo Download

 

Leave a Reply

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