我正在尝试创建卡片布局。这是我的布局。
<div style={{ display: "flex", flexDirection: "column", alignItems: "start", width: "100%", height: "auto", padding: "2rem", gap: "1rem", borderRadius: "2rem", backdropFilter: "blur(4rem)", background: "goldenrod", }}>
<div className="text-3xl unselectable font-bold" style={{display: "flex", flexDirection: "row",alignItems: "center",width: "100%", height: "3rem", }}>
<div style={{ width: "auto", height: "3rem", alignItems: "center", display: "flex" }}>
<Meteor weight="fill" color="#f2f2f2" /> { /* Phosphor Icons */}
</div>
<div style={{ width: "0.5rem", height: "100%" }}></div>
Technologies and Mastery
</div>
<div className="card-container-grid-2">
<div className="card">Hello</div>
<div className="card">Hello</div>
<div className="card">Hello</div>
<div className="card">Hello</div>
<div className="card">Hello</div>
<div className="card">Hello</div>
<div className="card">Hello</div>
<div className="card">Hello</div>
</div>
</div>
使用这种风格,
.card-container-grid-2 {
padding: 1rem;
gap: 1rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(calc(100% / 3), 1fr));
grid-auto-rows: 12rem;
width: 100%;
height: 100%;
}
.card {
display: flex;
flex-direction: column;
background: #f2f2f2;
border-radius: 0.5rem;
}
卡片渲染得很好。但是容器在Y轴上有溢出,并且它在左下角和右下角打破了圆角。尝试控制滚动溢出,但滚动条不可滚动并且圆角仍然尖锐。我怎样才能解决这个问题?有什么建议吗?
在父 div 中使用 box-sizing: border-box;