Can you please check the below code link? Hope it will work for you. You need to just give height: calc(100% - 15px); to .card-container.
Please refer to this link:
https://jsfiddle.net/yudizsolutions/zqmxecdo/1/
Solution 1 :
Problem :
In this snipper, I want the Bootstrap columns to have their height defined by their content, not the tallest element that is visible in the same row. In other words, I want each of these cards to start a couple of pixels below the one on-top whether or not there is a large card in that topping row. How can I go about doing this?
.card-container {
width: 100%;
overflow: hidden;
position: relative;
background-color: white;
margin-bottom: 15px;
box-shadow: 0 0 10px rgb(0 0 0 / 30%);
border: 1px solid rgba(204, 204, 204, 1);
transition: all 0.5s ease-in-out;
}
.card-container:hover {
box-shadow: 0 0 10px rgb(0 0 0 / 50%);
}
.card-image {
max-height: 200px;
overflow: hidden;
}
.card-image-src {
width: 100%;
transition: all 1s ease-in-out;
}
.card-image-src:hover {
transform: scale(1.1);
}
.card-text {
padding: 15px;
}
.card-title {
text-align: center;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container p-3 my-3">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="card-container">
<div class="card-image d-flex align-items-center">
<img src="https://online-learning.harvard.edu/sites/default/files/styles/header/public/course/cs50x-original.jpg" class="card-image-src">
</div>
<div class="card-text">
<h1 class="card-title">
Harvard CS50
</h1>
<p class="card-description">
This is CS50x , Harvard University's introduction to the intellectual enterprises of computer science and the art of programming for majors and non-majors alike, with or without prior programming experience. An entry-level course taught by David J. Malan,
CS50x teaches students how to think algorithmically and solve problems efficiently. Topics include abstraction, algorithms, data structures, encapsulation, resource management, security, software engineering, and web development. Languages
include C, Python, SQL, and JavaScript plus CSS and HTML. Problem sets inspired by real-world domains of biology, cryptography, finance, forensics, and gaming. The on-campus version of CS50x , CS50, is Harvard's largest course. Students who
earn a satisfactory score on 9 problem sets (i.e., programming assignments) and a final project are eligible for a certificate. This is a self-paced course–you may take CS50x on your own schedule.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card-container">
<div class="card-image d-flex align-items-center">
<img src="https://online-learning.harvard.edu/sites/default/files/styles/header/public/course/cs50x-original.jpg" class="card-image-src">
</div>
<div class="card-text">
<h1 class="card-title">
Harvard CS50
</h1>
<p class="card-description">
This is CS50x , Harvard University's introduction to the intellectual enterprises of computer science and the art of programming for majors and non-majors alike, with or without prior programming experience.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card-container">
<div class="card-image d-flex align-items-center">
<img src="https://online-learning.harvard.edu/sites/default/files/styles/header/public/course/cs50x-original.jpg" class="card-image-src">
</div>
<div class="card-text">
<h1 class="card-title">
Harvard CS50
</h1>
<p class="card-description">
This is CS50x , Harvard University's introduction to the intellectual enterprises of computer science and the art of programming for majors and non-majors alike, with or without prior programming experience. An entry-level course taught by David J. Malan,
CS50x teaches students how to think algorithmically and solve problems efficiently. Topics include abstraction, algorithms, data structures, encapsulation, resource management, security, software engineering, and web development. Languages
include C, Python, SQL, and JavaScript plus CSS and HTML. Problem sets inspired by real-world domains of biology,
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card-container">
<div class="card-image d-flex align-items-center">
<img src="https://online-learning.harvard.edu/sites/default/files/styles/header/public/course/cs50x-original.jpg" class="card-image-src">
</div>
<div class="card-text">
<h1 class="card-title">
Harvard CS50
</h1>
<p class="card-description">
This is CS50x , Harvard University's introduction to the intellectual enterprises of computer science and the art of programming for majors and non-majors alike, with or without prior programming experience. An entry-level course taught by David J. Malan,
CS50x teaches students how to think algorithmically and solve problems efficiently. Topics include abstraction, algorithms, data structures, encapsulation, resource management, security, software engineering, and web development. Languages
include C, Python, SQL, and JavaScript plus CSS and HTML. Problem sets inspired by real-world domains of biology, cryptography, finance, forensics, and gaming. The on-campus version of CS50x , CS50, is Harvard's largest course. Students who
earn a satisfactory score on 9 problem sets (i.e., programming assignments) and a final project are eligible for a certificate. This is a self-paced course–you may take CS50x on your own schedule.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card-container">
<div class="card-image d-flex align-items-center">
<img src="https://online-learning.harvard.edu/sites/default/files/styles/header/public/course/cs50x-original.jpg" class="card-image-src">
</div>
<div class="card-text">
<h1 class="card-title">
Harvard CS50
</h1>
<p class="card-description">
This is CS50x , Harvard University's introduction to the intellectual enterprises of computer science and the art of programming for majors and non-majors alike, with or without prior programming experience. An entry-level course taught by David J. Malan,
CS50x teaches students how to think algorithmically and solve problems efficiently. Topics include abstraction, algorithms, data structures, encapsulation, resource management, security, software engineering, and web development. Languages
include C, Python, SQL, and JavaScript plus CSS and HTML. Problem sets inspired by real-world domains of biology, cryptography, finance, forensics, and gaming. The on-campus version of CS50x , CS50, is Harvard's largest course. Students who
earn a satisfactory score on 9 problem sets (i.e., programming assignments) and a final project are eligible for a certificate. This is a self-paced course–you may take CS50x on your own schedule.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card-container">
<div class="card-image d-flex align-items-center">
<img src="https://online-learning.harvard.edu/sites/default/files/styles/header/public/course/cs50x-original.jpg" class="card-image-src">
</div>
<div class="card-text">
<h1 class="card-title">
Harvard CS50
</h1>
<p class="card-description">
This is CS50x , Harvard University's introduction to the intellectual enterprises of computer science and the art of programming for majors and non-majors alike, with or without prior programming experience. An entry-level course taught by David J. Malan,
CS50x teaches students how to think algorithmically and solve problems efficiently. Topics include abstraction, algorithms, data structures, encapsulation, resource management, security, software engineering, and web development. Languages
include C, Python, SQL, and JavaScript plus CSS and HTML. Problem sets inspired by real-world domains of biology, cryptography, finance, forensics, and gaming. The on-campus version of CS50x , CS50, is Harvard's largest course. Students who
earn a satisfactory score on 9 problem sets (i.e., programming assignments) and a final project are eligible for a certificate. This is a self-paced course–you may take CS50x on your own schedule.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card-container">
<div class="card-image d-flex align-items-center">
<img src="https://online-learning.harvard.edu/sites/default/files/styles/header/public/course/cs50x-original.jpg" class="card-image-src">
</div>
<div class="card-text">
<h1 class="card-title">
Harvard CS50
</h1>
<p class="card-description">
This is CS50x , Harvard University's introduction to the intellectual enterprises of computer science and the art of programming for majors and non-majors alike, with or without prior programming experience. An entry-level course taught by David J. Malan,
CS50x teaches students how to think algorithmically and solve problems efficiently. Topics include abstraction, algorithms, data structures, encapsulation, resource management, security, software engineering, and web development. Languages
include C, Python, SQL, and JavaScript plus CSS and HTML. Problem sets inspired by real-world domains of biology, cryptography, finance, forensics, and gaming. The on-campus version of CS50x , CS50, is Harvard's largest course. Students who
earn a satisfactory score on 9 problem sets (i.e., programming assignments) and a final project are eligible for a certificate. This is a self-paced course–you may take CS50x on your own schedule.
</p>
</div>
</div>
</div>
</div>
</div>Comments
Comment posted by article
It seems you want to achieve a Masonry layout. Check out this