使网格卡中的图像大小相同
Make the images same size in grid card
我制作了一些使用网格和 flexbox 作为内容的卡片。每张卡片的图像大小不一样。我使用显示网格作为卡片内容的包装器和 flexbox。我尝试在 trackcard_header class 中使用 flex-grow 和 flex-basis，但没有任何效果。我在下面附上了我的代码结果示例，请也查看代码片段。
截图如下：
这是我的片段：
.createpl_card_wrapper {
margin-top: 2rem;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-column-gap: 2rem;
grid-row-gap: 1rem;
}
.trackcard {
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 1rem;
background-color: rgba(0, 0, 0, 0.2);
width: 100%;
padding: 1rem 0.5rem;
position: relative;
}
.trackcard_header {
width: 80%;
margin: auto;
}
.trackcard_header img {
max-width: 100%;
height: auto;
border-radius: 1rem;
}
.trackcard_body {
padding: 1rem;
flex-grow: 1;
text-align: center;
}
.trackcard_body h2 {
font-size: 1.5rem;
}
.trackcard_body h4 {
font-size: 1rem;
}
.trackcard_footer {
width: 80%;
margin: auto;
}
.trackcard_btn {
width: 100%;
padding: 0.25rem 0;
background-color: #1db954;
border-radius: 0.5rem;
border: 1px solid #1db954;
color: #fff;
}
.trackcard_btn:hover {
background-color: #18a349;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<link rel="stylesheet" href="./src/styles.css" />
<body>
<div class="createpl_card_wrapper">
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b2738c0defcb336a0296eb7d704a"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>GANADARA (Feat. IU)</h2>
<h4>
Jay Park - GANADARA
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b273c63be04ae902b1da7a54d247"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>eight(Prod.&Feat. SUGA of BTS)</h2>
<h4>
IU - eight
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b27315cf3110f19687b1a24943d1"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>Good day</h2>
<h4>
IU - REAL
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b2734ed058b71650a6ca2c04adff"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>Celebrity</h2>
<h4>
IU - IU 5th Album 'LILAC'
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b273a1d785640d9421ec17ea8fe6"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>BBIBBI</h2>
<h4>
IU - BBIBBI
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>
我想让图片在垂直方向和水平方向上大小相同。谁能给我解决方案？提前谢谢你。
您需要给 div 一个实际大小，在您的代码中，它们只有 % 值，没有父静态值来去除 %age。我已将 .trackcard class 的宽度设置为 30vw。为了使图像正方形，您还需要给它一个不依赖于其他高度值的高度，但具有与宽度相同的值，所以我给它一个占位符 24vw 这是 80% .trackcard。您需要使用 object-fit: contain 才能不拉伸。您可以参考我链接的文档并使用您喜欢的文档。
.createpl_card_wrapper {
margin-top: 2rem;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-column-gap: 2rem;
grid-row-gap: 1rem;
}
.trackcard {
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 1rem;
background-color: rgba(0, 0, 0, 0.2);
width: 30vw;
padding: 1rem 0.5rem;
position: relative;
}
.trackcard_header {
width: 80%;
margin: auto;
}
.trackcard_header img {
width: 24vw;
height: 24vw;
object-fit: contain;
border-radius: 1rem;
}
.trackcard_body {
padding: 1rem;
flex-grow: 1;
text-align: center;
}
.trackcard_body h2 {
font-size: 1.5rem;
}
.trackcard_body h4 {
font-size: 1rem;
}
.trackcard_footer {
width: 80%;
margin: auto;
}
.trackcard_btn {
width: 100%;
padding: 0.25rem 0;
background-color: #1db954;
border-radius: 0.5rem;
border: 1px solid #1db954;
color: #fff;
}
.trackcard_btn:hover {
background-color: #18a349;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<link rel="stylesheet" href="./src/styles.css" />
<body>
<div class="createpl_card_wrapper">
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b2738c0defcb336a0296eb7d704a"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>GANADARA (Feat. IU)</h2>
<h4>
Jay Park - GANADARA
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b273c63be04ae902b1da7a54d247"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>eight(Prod.&Feat. SUGA of BTS)</h2>
<h4>
IU - eight
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b27315cf3110f19687b1a24943d1"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>Good day</h2>
<h4>
IU - REAL
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b2734ed058b71650a6ca2c04adff"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>Celebrity</h2>
<h4>
IU - IU 5th Album 'LILAC'
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b273a1d785640d9421ec17ea8fe6"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>BBIBBI</h2>
<h4>
IU - BBIBBI
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>
这可以通过一些 JavaScript 来实现。
首先你 select 具有 querySelectorAll 的所有元素。然后用 offsetHeight 制作一个高度数组。 Math.max returns 输入参数的最大和
在 for 循环中，您可以将元素 minHeight 设置为 Math.max。它一直循环直到找到长度，然后应用样式。请记住，这会将最大图像的高度应用为所有图像的 min-height。
当我们这样做的时候，我对 h2 元素做了同样的事情，因此它们在所有卡片中均等对齐。我把 JS 分开了，这样更容易阅读和理解。唯一的问题是，如果拖动屏幕尺寸，您必须重新加载页面，因为 min-height 会有点偏差。
至于CSS我用了grid-template-columns: repeat(5, minmax(200px, 1fr));。这样，总会有 5 列至少 200 像素宽，因此它们的大小相等。如果您想要响应式效果，只需将 5 编辑为 auto-fit，这样它们就会在较小的屏幕上换行。
像这样：
grid-template-columns: repeat(5, minmax(auto-fit, 1fr));
如果您想更改图像的 width 或 height，我建议使用 max-width 和 max-height 以获得响应效果。如果你不改变宽度，它们看起来会有点拉长。
您也可以在图片上应用object-fit: cover;，这样图片不会被拉伸，而是会被切掉一部分。
希望对您有所帮助！
下面的代码片段将无法正常工作，请检查 Codepen：https://codepen.io/sigurdmazanti/pen/qBpLGXe
let img = document.querySelectorAll(".trackcard_header img");
let text = document.querySelectorAll(".trackcard_body h2");
// Image
let imgLength = Array.from(img).map(e => e.offsetHeight);
let maxLength = Math.max(...imgLength);
// H2
let textLength = Array.from(text).map(e => e.offsetHeight);
let maxTextLength = Math.max(...textLength);
// Image for loop
for (let i = 0; i < img.length; i++) {
img[i].style.minHeight = maxLength + "px";
}
// H2 for loop
for (let i = 0; i < text.length; i++) {
text[i].style.minHeight = maxTextLength + "px";
}
.createpl_card_wrapper {
margin-top: 2rem;
display: grid;
/*grid-template-columns: repeat(5, 1fr); */
grid-template-columns: repeat(5, minmax(200px, 1fr));
grid-column-gap: 2rem;
grid-row-gap: 1rem;
}
.trackcard {
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 1rem;
background-color: rgba(0, 0, 0, 0.2);
width: 100%;
padding: 1rem 0.5rem;
position: relative;
}
.trackcard_header {
width: 80%;
margin: auto;
}
.trackcard_header img {
max-width: 100%;
height: auto;
border-radius: 1rem;
/* Consider this */
object-fit: cover;
}
.trackcard_body {
padding: 1rem;
flex-grow: 1;
text-align: center;
}
.trackcard_body h2 {
font-size: 1.5rem;
}
.trackcard_body h4 {
font-size: 1rem;
margin-top: auto;
}
.trackcard_footer {
width: 80%;
margin: auto;
}
.trackcard_btn {
width: 100%;
padding: 0.25rem 0;
background-color: #1db954;
border-radius: 0.5rem;
border: 1px solid #1db954;
color: #fff;
}
.trackcard_btn:hover {
background-color: #18a349;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<link rel="stylesheet" href="./src/styles.css" />
<body>
<div class="createpl_card_wrapper">
<div class="trackcard">
<div class="trackcard_header">
<img src="https://i.scdn.co/image/ab67616d0000b2738c0defcb336a0296eb7d704a" alt="name" />
</div>
<div class="trackcard_body">
<h2>GANADARA (Feat. IU)</h2>
<h4>
Jay Park - GANADARA
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img src="https://i.scdn.co/image/ab67616d0000b273c63be04ae902b1da7a54d247" alt="name" />
</div>
<div class="trackcard_body">
<h2>eight(Prod.&Feat. SUGA of BTS)</h2>
<h4>
IU - eight
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img src="https://i.scdn.co/image/ab67616d0000b27315cf3110f19687b1a24943d1" alt="name" />
</div>
<div class="trackcard_body">
<h2>Good day</h2>
<h4>
IU - REAL
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img src="https://i.scdn.co/image/ab67616d0000b2734ed058b71650a6ca2c04adff" alt="name" />
</div>
<div class="trackcard_body">
<h2>Celebrity</h2>
<h4>
IU - IU 5th Album 'LILAC'
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img src="https://i.scdn.co/image/ab67616d0000b273a1d785640d9421ec17ea8fe6" alt="name" />
</div>
<div class="trackcard_body">
<h2>BBIBBI</h2>
<h4>
IU - BBIBBI
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>
我制作了一些使用网格和 flexbox 作为内容的卡片。每张卡片的图像大小不一样。我使用显示网格作为卡片内容的包装器和 flexbox。我尝试在 trackcard_header class 中使用 flex-grow 和 flex-basis，但没有任何效果。我在下面附上了我的代码结果示例，请也查看代码片段。
截图如下：
这是我的片段：
.createpl_card_wrapper {
margin-top: 2rem;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-column-gap: 2rem;
grid-row-gap: 1rem;
}
.trackcard {
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 1rem;
background-color: rgba(0, 0, 0, 0.2);
width: 100%;
padding: 1rem 0.5rem;
position: relative;
}
.trackcard_header {
width: 80%;
margin: auto;
}
.trackcard_header img {
max-width: 100%;
height: auto;
border-radius: 1rem;
}
.trackcard_body {
padding: 1rem;
flex-grow: 1;
text-align: center;
}
.trackcard_body h2 {
font-size: 1.5rem;
}
.trackcard_body h4 {
font-size: 1rem;
}
.trackcard_footer {
width: 80%;
margin: auto;
}
.trackcard_btn {
width: 100%;
padding: 0.25rem 0;
background-color: #1db954;
border-radius: 0.5rem;
border: 1px solid #1db954;
color: #fff;
}
.trackcard_btn:hover {
background-color: #18a349;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<link rel="stylesheet" href="./src/styles.css" />
<body>
<div class="createpl_card_wrapper">
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b2738c0defcb336a0296eb7d704a"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>GANADARA (Feat. IU)</h2>
<h4>
Jay Park - GANADARA
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b273c63be04ae902b1da7a54d247"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>eight(Prod.&Feat. SUGA of BTS)</h2>
<h4>
IU - eight
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b27315cf3110f19687b1a24943d1"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>Good day</h2>
<h4>
IU - REAL
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b2734ed058b71650a6ca2c04adff"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>Celebrity</h2>
<h4>
IU - IU 5th Album 'LILAC'
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b273a1d785640d9421ec17ea8fe6"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>BBIBBI</h2>
<h4>
IU - BBIBBI
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>
我想让图片在垂直方向和水平方向上大小相同。谁能给我解决方案？提前谢谢你。
您需要给 div 一个实际大小，在您的代码中，它们只有 % 值，没有父静态值来去除 %age。我已将 .trackcard class 的宽度设置为 30vw。为了使图像正方形，您还需要给它一个不依赖于其他高度值的高度，但具有与宽度相同的值，所以我给它一个占位符 24vw 这是 80% .trackcard。您需要使用 object-fit: contain 才能不拉伸。您可以参考我链接的文档并使用您喜欢的文档。
.createpl_card_wrapper {
margin-top: 2rem;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-column-gap: 2rem;
grid-row-gap: 1rem;
}
.trackcard {
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 1rem;
background-color: rgba(0, 0, 0, 0.2);
width: 30vw;
padding: 1rem 0.5rem;
position: relative;
}
.trackcard_header {
width: 80%;
margin: auto;
}
.trackcard_header img {
width: 24vw;
height: 24vw;
object-fit: contain;
border-radius: 1rem;
}
.trackcard_body {
padding: 1rem;
flex-grow: 1;
text-align: center;
}
.trackcard_body h2 {
font-size: 1.5rem;
}
.trackcard_body h4 {
font-size: 1rem;
}
.trackcard_footer {
width: 80%;
margin: auto;
}
.trackcard_btn {
width: 100%;
padding: 0.25rem 0;
background-color: #1db954;
border-radius: 0.5rem;
border: 1px solid #1db954;
color: #fff;
}
.trackcard_btn:hover {
background-color: #18a349;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<link rel="stylesheet" href="./src/styles.css" />
<body>
<div class="createpl_card_wrapper">
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b2738c0defcb336a0296eb7d704a"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>GANADARA (Feat. IU)</h2>
<h4>
Jay Park - GANADARA
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b273c63be04ae902b1da7a54d247"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>eight(Prod.&Feat. SUGA of BTS)</h2>
<h4>
IU - eight
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b27315cf3110f19687b1a24943d1"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>Good day</h2>
<h4>
IU - REAL
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b2734ed058b71650a6ca2c04adff"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>Celebrity</h2>
<h4>
IU - IU 5th Album 'LILAC'
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b273a1d785640d9421ec17ea8fe6"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>BBIBBI</h2>
<h4>
IU - BBIBBI
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>
这可以通过一些 JavaScript 来实现。
首先你 select 具有 querySelectorAll 的所有元素。然后用 offsetHeight 制作一个高度数组。 Math.max returns 输入参数的最大和
在 for 循环中，您可以将元素 minHeight 设置为 Math.max。它一直循环直到找到长度，然后应用样式。请记住，这会将最大图像的高度应用为所有图像的 min-height。
当我们这样做的时候，我对 h2 元素做了同样的事情，因此它们在所有卡片中均等对齐。我把 JS 分开了，这样更容易阅读和理解。唯一的问题是，如果拖动屏幕尺寸，您必须重新加载页面，因为 min-height 会有点偏差。
至于CSS我用了grid-template-columns: repeat(5, minmax(200px, 1fr));。这样，总会有 5 列至少 200 像素宽，因此它们的大小相等。如果您想要响应式效果，只需将 5 编辑为 auto-fit，这样它们就会在较小的屏幕上换行。
像这样：
grid-template-columns: repeat(5, minmax(auto-fit, 1fr));
如果您想更改图像的 width 或 height，我建议使用 max-width 和 max-height 以获得响应效果。如果你不改变宽度，它们看起来会有点拉长。
您也可以在图片上应用object-fit: cover;，这样图片不会被拉伸，而是会被切掉一部分。
希望对您有所帮助！ 下面的代码片段将无法正常工作，请检查 Codepen：https://codepen.io/sigurdmazanti/pen/qBpLGXe
let img = document.querySelectorAll(".trackcard_header img");
let text = document.querySelectorAll(".trackcard_body h2");
// Image
let imgLength = Array.from(img).map(e => e.offsetHeight);
let maxLength = Math.max(...imgLength);
// H2
let textLength = Array.from(text).map(e => e.offsetHeight);
let maxTextLength = Math.max(...textLength);
// Image for loop
for (let i = 0; i < img.length; i++) {
img[i].style.minHeight = maxLength + "px";
}
// H2 for loop
for (let i = 0; i < text.length; i++) {
text[i].style.minHeight = maxTextLength + "px";
}
.createpl_card_wrapper {
margin-top: 2rem;
display: grid;
/*grid-template-columns: repeat(5, 1fr); */
grid-template-columns: repeat(5, minmax(200px, 1fr));
grid-column-gap: 2rem;
grid-row-gap: 1rem;
}
.trackcard {
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 1rem;
background-color: rgba(0, 0, 0, 0.2);
width: 100%;
padding: 1rem 0.5rem;
position: relative;
}
.trackcard_header {
width: 80%;
margin: auto;
}
.trackcard_header img {
max-width: 100%;
height: auto;
border-radius: 1rem;
/* Consider this */
object-fit: cover;
}
.trackcard_body {
padding: 1rem;
flex-grow: 1;
text-align: center;
}
.trackcard_body h2 {
font-size: 1.5rem;
}
.trackcard_body h4 {
font-size: 1rem;
margin-top: auto;
}
.trackcard_footer {
width: 80%;
margin: auto;
}
.trackcard_btn {
width: 100%;
padding: 0.25rem 0;
background-color: #1db954;
border-radius: 0.5rem;
border: 1px solid #1db954;
color: #fff;
}
.trackcard_btn:hover {
background-color: #18a349;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<link rel="stylesheet" href="./src/styles.css" />
<body>
<div class="createpl_card_wrapper">
<div class="trackcard">
<div class="trackcard_header">
<img src="https://i.scdn.co/image/ab67616d0000b2738c0defcb336a0296eb7d704a" alt="name" />
</div>
<div class="trackcard_body">
<h2>GANADARA (Feat. IU)</h2>
<h4>
Jay Park - GANADARA
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img src="https://i.scdn.co/image/ab67616d0000b273c63be04ae902b1da7a54d247" alt="name" />
</div>
<div class="trackcard_body">
<h2>eight(Prod.&Feat. SUGA of BTS)</h2>
<h4>
IU - eight
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img src="https://i.scdn.co/image/ab67616d0000b27315cf3110f19687b1a24943d1" alt="name" />
</div>
<div class="trackcard_body">
<h2>Good day</h2>
<h4>
IU - REAL
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img src="https://i.scdn.co/image/ab67616d0000b2734ed058b71650a6ca2c04adff" alt="name" />
</div>
<div class="trackcard_body">
<h2>Celebrity</h2>
<h4>
IU - IU 5th Album 'LILAC'
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img src="https://i.scdn.co/image/ab67616d0000b273a1d785640d9421ec17ea8fe6" alt="name" />
</div>
<div class="trackcard_body">
<h2>BBIBBI</h2>
<h4>
IU - BBIBBI
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>