CODEWITHSUNDEEP
javascripthtmlcss
monie
monie

Reputation: 63

How do I make these cards align with equal gap?

I am using css grids to make some divs align. As seen in the picture provided, the cards have an uneven gap between them. I don't want to use padding or position translate to align them because the resolutions sizes will differ from device to device and it will look all jumbled.

Here is the picture

HTML:


<div class= "column">   <!--this column has been placed so that it can include a number of div boxes that 
carries the solutions for the website.  -->

  <div class="card card1">
    <h5>breathing tool</h5>
    
    <a href="breathing-tool.html">
      <ol> 
        <li> Breathing helps reduce anxiousness. </li>
         <li> This mini programme is developed to help with rhytmic breathing. </li>
            
      
        </ol>
    </a>
    </div> 


    <div class="card card2">
      <h5>Pink meditation room</h5>
      
          <a href="pink-meditation.html"><p> This is the breathing tool and will help with the clamness of the users</p></a>
    </div> 

       
      

      <div class="card card3">
        <h5> Quote dispenser</h5>
 <a href="quote-generator.html"><p> This is the breathing tool and will help with the clamness of the users</p></a>
        
        </div> 


          
</div> <!--this is the closing tag of "column"-->

CSS:

column{
display: grid;                               
height: auto;
width: auto;
grid-template-columns: repeat(2,4fr);
/*the colums numbers have been replaced with a repeat of 2 columns with the specified size of 4fractions*/
grid-template-rows: 2.5fr 2.5fr 2.5fr 2.5fr 2.5fr;
background-color: bisque;
grid-template-areas:
"card1 card1 card2 card2 card3 card3";

/* The display grid here works by making the card divs 
align properly like I need them to. This will make 
space for writng and describing each of the provided
solutions without a disorientation.*/
}


.card{                                                                 
width: 250px;
height: 350px;
display: inline-block;
border-radius: 10px;
padding: 15px;
box-sizing: border-box;
cursor: pointer;
margin: 30px 70px;
background-image: url(images/pink2.png);
background-position: center;
background-size: cover;
transition: transform 0.5s;

Upvotes: 0

Views: 851

Answers (1)

GucciBananaKing99
GucciBananaKing99

Reputation: 1506

Use flexbox instead of grid

Remove all the grid in .column and replace them with these:

    display: flex; /* adding flex */
    justify-content: space-around; /* Positioning them with spaces */
    flex-wrap: wrap; /* Wrapping Elements when page is small */

I also added a border to show the elements, you can remove it.

Don't forget to run the code snippet and press full page to see the full result

This would be your final code:

.column{
display: flex; /* adding flex */
justify-content: space-around; /* Positioning them with spaces */
flex-wrap: wrap; /* Wrapping Elements when page is small */
height: auto;
width: auto;
background-color: bisque;
}

.card{                                                                 
width: 250px;
height: 350px;
display: inline-block;
border-radius: 10px;
padding: 15px;
box-sizing: border-box;
cursor: pointer;
margin: 30px 70px;
background-image: url(images/pink2.png);
background-position: center;
background-size: cover;
transition: transform 0.5s;

/* You can remove this: */
border: 1px solid;
}
<div class= "column">   <!--this column has been placed so that it can include a number of div boxes that 
carries the solutions for the website.  -->

  <div class="card card1">
    <h5>breathing tool</h5>
    
    <a href="breathing-tool.html">
      <ol> 
        <li> Breathing helps reduce anxiousness. </li>
         <li> This mini programme is developed to help with rhytmic breathing. </li>
            
      
        </ol>
    </a>
    </div> 


    <div class="card card2">
      <h5>Pink meditation room</h5>
      
          <a href="pink-meditation.html"><p> This is the breathing tool and will help with the clamness of the users</p></a>
    </div> 

       
      

      <div class="card card3">
        <h5> Quote dispenser</h5>
 <a href="quote-generator.html"><p> This is the breathing tool and will help with the clamness of the users</p></a>
        
        </div> 


          
</div> <!--this is the closing tag of "column"-->

Upvotes: 1

Related Questions