placing a button at the bottom of grid

September 16, 2024

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.

>Solution :

Two approaches you could do are:

You can put position:relative on the parent and bottom:0;position:absolute on the button.

You can use flex

Add display:flex;flex-direction:column to the parent and margin-top:auto to the button. With this approach you will notice that the button is filling the available width and so you may need to add extra css to ensure the width is set to your desired value