<div class="section">
<div class="section__heading">
<h3 class="section__title">爆款直降</h3>
</div>
<div class="section__body">
<ul class="cards">
<li class="card">
<div class="card__media">
<img src="https://loremflickr.com/640/640?random=1" alt="">
<div class="card__badge">年货节</div>
</div>
<div class="card__content">
<div class="card__heading">
<h4 class="card__title">卡片标题卡片标题</h4>
</div>
<div class="card__des">口味清爽,最多八个字</div>
<div class="card__action">
<div class="card__price">
<span>¥</span>
<strong>32</strong>
</div>
<div class="card__link">
<svg t="1639970508640" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9201" width="200" height="200">
<path d="M398.933333 326.4l168.533334 168.533333-168.533334 168.533334c-14.933333 14.933333-14.933333 38.4 0 53.333333s38.4 14.933333 53.333334 0l196.266666-196.266667c14.933333-14.933333 14.933333-38.4 0-53.333333l-196.266666-196.266667c-14.933333-14.933333-38.4-14.933333-53.333334 0s-14.933333 40.533333 0 55.466667zM512 981.333333C251.733333 981.333333 42.666667 772.266667 42.666667 512S251.733333 42.666667 512 42.666667s469.333333 209.066667 469.333333 469.333333-209.066667 469.333333-469.333333 469.333333z" p-id="9202" fill="currentColor"></path>
</svg>
</div>
</div>
</div>
</li>
<li class="card">
<div class="card__media">
<img src="https://loremflickr.com/640/640?random=12" alt="">
<div class="card__badge">年货节</div>
</div>
<div class="card__content">
<div class="card__heading">
<h4 class="card__title">卡片标题卡片标题</h4>
</div>
<div class="card__des">口味清爽,最多八个字</div>
<div class="card__action">
<div class="card__price">
<span>¥</span>
<strong>32</strong>
</div>
<div class="card__link">
<svg t="1639970508640" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9201" width="200" height="200">
<path d="M398.933333 326.4l168.533334 168.533333-168.533334 168.533334c-14.933333 14.933333-14.933333 38.4 0 53.333333s38.4 14.933333 53.333334 0l196.266666-196.266667c14.933333-14.933333 14.933333-38.4 0-53.333333l-196.266666-196.266667c-14.933333-14.933333-38.4-14.933333-53.333334 0s-14.933333 40.533333 0 55.466667zM512 981.333333C251.733333 981.333333 42.666667 772.266667 42.666667 512S251.733333 42.666667 512 42.666667s469.333333 209.066667 469.333333 469.333333-209.066667 469.333333-469.333333 469.333333z" p-id="9202" fill="currentColor"></path>
</svg>
</div>
</div>
</div>
</li>
<li class="card">
<div class="card__media">
<img src="https://loremflickr.com/640/640?random=132" alt="">
<div class="card__badge">年货节</div>
</div>
<div class="card__content">
<div class="card__heading">
<h4 class="card__title">卡片标题卡片标题</h4>
</div>
<div class="card__des">口味清爽,最多八个字</div>
<div class="card__action">
<div class="card__price">
<span>¥</span>
<strong>32</strong>
</div>
<div class="card__link">
<svg t="1639970508640" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9201" width="200" height="200">
<path d="M398.933333 326.4l168.533334 168.533333-168.533334 168.533334c-14.933333 14.933333-14.933333 38.4 0 53.333333s38.4 14.933333 53.333334 0l196.266666-196.266667c14.933333-14.933333 14.933333-38.4 0-53.333333l-196.266666-196.266667c-14.933333-14.933333-38.4-14.933333-53.333334 0s-14.933333 40.533333 0 55.466667zM512 981.333333C251.733333 981.333333 42.666667 772.266667 42.666667 512S251.733333 42.666667 512 42.666667s469.333333 209.066667 469.333333 469.333333-209.066667 469.333333-469.333333 469.333333z" p-id="9202" fill="currentColor"></path>
</svg>
</div>
</div>
</div>
</li>
<li class="card">
<div class="card__media">
<img src="https://loremflickr.com/640/640?random=101" alt="">
<div class="card__badge">年货节</div>
</div>
<div class="card__content">
<div class="card__heading">
<h4 class="card__title">卡片标题卡片标题</h4>
</div>
<div class="card__des">口味清爽,最多八个字</div>
<div class="card__action">
<div class="card__price">
<span>¥</span>
<strong>32</strong>
</div>
<div class="card__link">
<svg t="1639970508640" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9201" width="200" height="200">
<path d="M398.933333 326.4l168.533334 168.533333-168.533334 168.533334c-14.933333 14.933333-14.933333 38.4 0 53.333333s38.4 14.933333 53.333334 0l196.266666-196.266667c14.933333-14.933333 14.933333-38.4 0-53.333333l-196.266666-196.266667c-14.933333-14.933333-38.4-14.933333-53.333334 0s-14.933333 40.533333 0 55.466667zM512 981.333333C251.733333 981.333333 42.666667 772.266667 42.666667 512S251.733333 42.666667 512 42.666667s469.333333 209.066667 469.333333 469.333333-209.066667 469.333333-469.333333 469.333333z" p-id="9202" fill="currentColor"></path>
</svg>
</div>
</div>
</div>
</li>
<li class="card">
<div class="card__media">
<img src="https://loremflickr.com/640/640?random=1092" alt="">
<div class="card__badge">年货节</div>
</div>
<div class="card__content">
<div class="card__heading">
<h4 class="card__title">卡片标题卡片标题</h4>
</div>
<div class="card__des">口味清爽,最多八个字</div>
<div class="card__action">
<div class="card__price">
<span>¥</span>
<strong>32</strong>
</div>
<div class="card__link">
<svg t="1639970508640" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9201" width="200" height="200">
<path d="M398.933333 326.4l168.533334 168.533333-168.533334 168.533334c-14.933333 14.933333-14.933333 38.4 0 53.333333s38.4 14.933333 53.333334 0l196.266666-196.266667c14.933333-14.933333 14.933333-38.4 0-53.333333l-196.266666-196.266667c-14.933333-14.933333-38.4-14.933333-53.333334 0s-14.933333 40.533333 0 55.466667zM512 981.333333C251.733333 981.333333 42.666667 772.266667 42.666667 512S251.733333 42.666667 512 42.666667s469.333333 209.066667 469.333333 469.333333-209.066667 469.333333-469.333333 469.333333z" p-id="9202" fill="currentColor"></path>
</svg>
</div>
</div>
</div>
</li>
<li class="card">
<div class="card__media">
<img src="https://loremflickr.com/640/640?random=103" alt="">
<div class="card__badge">年货节</div>
</div>
<div class="card__content">
<div class="card__heading">
<h4 class="card__title">卡片标题卡片标题</h4>
</div>
<div class="card__des">口味清爽,最多八个字</div>
<div class="card__action">
<div class="card__price">
<span>¥</span>
<strong>32</strong>
</div>
<div class="card__link">
<svg t="1639970508640" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9201" width="200" height="200">
<path d="M398.933333 326.4l168.533334 168.533333-168.533334 168.533334c-14.933333 14.933333-14.933333 38.4 0 53.333333s38.4 14.933333 53.333334 0l196.266666-196.266667c14.933333-14.933333 14.933333-38.4 0-53.333333l-196.266666-196.266667c-14.933333-14.933333-38.4-14.933333-53.333334 0s-14.933333 40.533333 0 55.466667zM512 981.333333C251.733333 981.333333 42.666667 772.266667 42.666667 512S251.733333 42.666667 512 42.666667s469.333333 209.066667 469.333333 469.333333-209.066667 469.333333-469.333333 469.333333z" p-id="9202" fill="currentColor"></path>
</svg>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="form">
<label for="gap">gap:</label>
<input type="range" min="10" max="40" value="20" step="4" id="gap" name="gap" />
<output id="gap-output">20px</output>
<label for="columns">columns:</label>
<input type="range" min="2" max="6" value="3" step="1" id="columns" name="columns" />
<output id="columns-output">3</output>
<label for="min-width">min-width:</label>
<input type="range" min="180" max="360" value="220" step="4" id="min-width" name="min-width" />
<output id="min-width-output">220px</output>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
min-height: 100vh;
background-color: #557;
display: grid;
grid-template-rows: 1fr auto;
align-items: start;
justify-content: center;
}
img {
max-width: 100%;
height: auto;
vertical-align: top;
}
svg {
width: 1em;
height: 1em;
}
ul {
list-style: none outside none;
}
.form {
width: 100vw;
color: #fff;
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
align-items: center;
background-color: rgb(0 0 0 / 0.8);
padding: 20px;
}
.section {
display: flex;
flex-direction: column;
background-color: #f4f4f4;
padding: 24px;
width: 750px;
overflow: hidden;
resize: horizontal;
justify-self: center;
}
.section__heading {
display: flex;
align-items: center;
color: #333;
margin-bottom: 24px;
}
.section__title {
font-size: 32px;
font-weight: 500;
}
.cards {
--gap: 18px;
--columns: 3;
--min-width: 220px;
display: flex;
flex-wrap: wrap;
gap: var(--gap);
overflow: hidden;
}
.card {
background-color: #fff;
border-radius: 12px;
display: flex;
flex-direction: column;
flex: 1 1 calc((100% - var(--gap) * (var(--columns) - 1)) / var(--columns));
min-width: var(--min-width);
}
.card__media {
position: relative;
border-radius: 12px 12px 0 0;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
padding: 14px;
min-height: 220px;
}
.card__media .card__badge {
position: absolute;
background-image: linear-gradient(90deg, #ff5000 0%, #ff0552 99%);
border-radius: 4px;
color: #fff;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 2px 4px;
font-size: 20px;
font-weight: 700;
line-height: 1;
left: 14px;
bottom: -12px;
}
.card__content {
display: flex;
flex-direction: column;
padding: 0 14px 24px;
}
.card__title {
font-weight: 500;
font-size: 24px;
color: #333333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 8px;
}
.card__des {
max-width: 8em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 20px;
color: #ba9663;
margin-bottom: 18px;
}
.card__action {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 500;
font-size: 32px;
color: #ff5000;
line-height: 1;
}
.card__price {
display: inline-flex;
align-items: flex-end;
}
.card__price span {
font-weight: normal;
font-size: 24px;
position: relative;
bottom: 0.125em;
}
.card__link {
font-size: 32px;
font-weight: normal;
display: inline-flex;
justify-content: center;
align-items: center;
}
const cards = document.querySelector(".cards");
const gapInput = document.getElementById("gap");
const gapOutput = document.getElementById("gap-output");
const columnsInput = document.getElementById("columns");
const columnsOutput = document.getElementById("columns-output");
const minWidthInput = document.getElementById("min-width");
const minWidthOutput = document.getElementById("min-width-output");
gapInput.addEventListener("input", (etv) => {
cards.style.setProperty("--gap", `${etv.target.value}px`);
gapOutput.textContent = `${etv.target.value}px`;
});
columnsInput.addEventListener("input", (etv) => {
cards.style.setProperty("--columns", `${etv.target.value}`);
columnsOutput.textContent = `${etv.target.value}`;
});
minWidthInput.addEventListener("input", (etv) => {
cards.style.setProperty("--min-width", `${etv.target.value}px`);
minWidthOutput.textContent = `${etv.target.value}px`;
});
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.