Question posted in 
Can anyone help me in placing a button at the end of a grid irrespective of the content. i have read all the question related to this but none clarifies my query. Please have a look at the code below and and answer my query. i shall be obliged if anyone can help me out and help me to learn as well.
:root{
--primary-color: #00605f;
--secondary-color: #017479;
--text-dark:#0f172a;
--text-light:#94a3b8;
--white:#ffffff;
--hover-color:#E5E4E2;
--max-width: 1400px;
}
.canister-a{
background-color: var(--primary-color);
color: var(--white);
max-width:var(--max-width);
border-radius: 7px;
padding:1%;
margin:2% auto;
margin-top: 10px;
display: flex;
flex-direction: column;
}
.canister-a .content-d{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-areas: "pricing-card-a pricing-card-b pricing-card-c";
}
.price-card-a {
grid-area: pricing-card-a;
border-right: 0.1px solid #ffffff;
padding: 1.5rem;
}
.price-card-b {
grid-area: pricing-card-b;
border-right: 0.1px solid #ffffff;
padding: 1.5rem;
}
.price-card-c {
grid-area: pricing-card-c;
padding: 1.5rem;
}
.price-card-a h2, .price-card-b h2, .price-card-c h2{
color: var(--white);
font-weight: 400;
background: var(--secondary-color);
text-align: center;
border-radius: 7px;
}
.price-card-a h4,.price-card-b h4, .price-card-c h4{
color: var(--white);
font-size: 1.5rem;
}
.price-card-a span, .price-card-b span, .price-card-c span{
margin: .2rem;
}
.content-d ul{
list-style: none;
}
.content-d li{
line-height: 1.5rem;
margin-bottom: 10px;
}
.content-d button{
padding: .75rem 2rem;
outline: 1px solid var(--white);
border:none;
font-size: 1rem;
font-weight: 600;
color: var(--white);
background-color: var(--primary-color);
cursor: pointer;
border-radius: 7px;
}
.content-d button > a{
text-decoration: none;
color: var(--white);
}
.content-d button:hover,.content-d button:focus{
background: var(--secondary-color);
} <div class="canister-a">
<div class="content-d">
<div class="price-card-a">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in porta ex, vitae elementum magna. Vestibulum cursus turpis non neque mattis scelerisque. Proin pretium justo sit amet nisl accumsan, non scelerisque enim mattis. Nulla facilisi. Donec rutrum tempus erat ut consectetur. Nam eget facilisis ipsum, non condimentum mi. Morbi sed turpis quis urna molestie pretium non non diam. In hac habitasse platea dictumst. Nam ullamcorper venenatis ipsum a euismod. Curabitur congue malesuada leo, at aliquam est interdum sed. Vivamus eget est molestie, mattis dui nec, laoreet quam. Donec a maximus turpis. Donec sit amet libero tortor. Fusce ut massa ut lectus ultricies rhoncus a vitae mauris. Donec at mi ullamcorper, laoreet lectus sed, tempor eros.
<button><a target="_blank" href=" https://wa.me/11111">Contact now</a></button>
</div>
<div class="price-card-b">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in porta ex, vitae elementum magna. Vestibulum cursus turpis non neque mattis scelerisque. Proin pretium justo sit amet nisl accumsan, non scelerisque enim mattis. Nulla facilisi. Donec rutrum tempus erat ut consectetur. Nam eget facilisis ipsum, non condimentum mi. Morbi sed turpis quis urna molestie pretium non non diam. In hac habitasse platea dictumst. Nam ullamcorper venenatis ipsum a euismod. Curabitur congue malesuada leo, at aliquam est interdum sed. Vivamus eget est molestie, mattis dui nec, laoreet quam. Donec a maximus turpis. Donec sit amet libero tortor. Fusce ut massa ut lectus ultricies rhoncus a vitae mauris. Donec at mi ullamcorper, laoreet lectus sed, tempor eros.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi sed velit eu nisl vestibulum imperdiet a vitae ante. Curabitur sagittis vitae dui sed luctus. Suspendisse id dui scelerisque, finibus odio viverra, volutpat est. Vestibulum varius, massa eget semper tempus, ipsum velit cursus tortor, non hendrerit purus mi quis diam. Donec non mattis risus, et sodales mauris. Donec mattis quam sed magna dignissim vulputate. Aenean elementum feugiat urna, ullamcorper iaculis ex porta ut. Nullam venenatis euismod erat ac suscipit.
<button><a target="_blank" href=" https://wa.me/111111">Contact now</a></button>
</div>
<div class="price-card-c">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in porta ex, vitae elementum magna. Vestibulum cursus turpis non neque mattis scelerisque. Proin pretium justo sit amet nisl accumsan, non scelerisque enim mattis. Nulla facilisi. Donec rutrum tempus erat ut consectetur. Nam eget facilisis ipsum, non condimentum mi. Morbi sed turpis quis urna molestie pretium non non diam. In hac habitasse platea dictumst. Nam ullamcorper venenatis ipsum a euismod. Curabitur congue malesuada leo, at aliquam est interdum sed. Vivamus eget est molestie, mattis dui nec, laoreet quam. Donec a maximus turpis. Donec sit amet libero tortor. Fusce ut massa ut lectus ultricies rhoncus a vitae mauris. Donec at mi ullamcorper, laoreet lectus sed, tempor eros.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi sed velit eu nisl vestibulum imperdiet a vitae ante. Curabitur sagittis vitae dui sed luctus. Suspendisse id dui scelerisque, finibus odio viverra, volutpat est. Vestibulum varius, massa eget semper tempus, ipsum velit cursus tortor, non hendrerit purus mi quis diam. Donec non mattis risus, et sodales mauris. Donec mattis quam sed magna dignissim vulputate. Aenean elementum feugiat urna, ullamcorper iaculis ex porta ut. Nullam venenatis euismod erat ac suscipit.
<button><a target="_blank" href=" https://wa.me/111111">Contact now</a></button>
</div>
</div>
</div>i tried position absolute and bottom 0. I am expecting that each grid to become equal length and each button appear at the bottom irrespective of the content.
5
Answers
All answers are correct. but i went with "Add display:flex;flex-direction:column to the parent and margin-top:auto to the button"
Two approaches you could do are:
You can put
position:relativeon the parent andbottom:0;position:absoluteon the button.OR
You can use
flexAdd
display:flex;flex-direction:columnto the parent andmargin-top:autoto thebutton. With this approach you will notice that the button is filling the available width and so you may need to add extracssto ensure the width is set to your desired valueIf you use CSS flex on all of your "card"
<div>elements you can set them to:This would push the button to the bottom of that container, since the flex logic would be maximizing space in between the contents.
The button also becomes full-width, but you can return it to your expected width with:
(Or use any
widthormax-widthyou like. Or keep it the full width, which may provide a better mobile experience.)For example (see "ADDED" section at the end of the CSS):
You can add a
flexboxto the direct children of the gridAlthough this can be achieved relatively easily using a
flexlayout for each column in the grid,subgridwas specifically designed for layouts like this – be aware that this feature does not yet have full browser support. It is supported in all major browsers though.