网格布局问题：卡片未占满grid容器宽度，无法平分页面

问题根源 #

你的.card元素设置了width: fit-content，这会让卡片宽度仅适配内部内容的尺寸，无法填充网格容器分配的1fr列宽，导致卡片达不到“占据页面一半”的效果。

修复方案 #

修改.card的样式，去掉width: fit-content，或者直接设置width: 100%，让卡片完全填充所在的网格列：

.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; /* 替换原有的 width: fit-content */
    height: 100%;
}

可选优化 #

如果希望书籍标题能自适应卡片宽度，可将.book-title的固定宽度改为100%，让文本在卡片范围内居中显示：

.book-title {
    text-align: center;
    width: 100%; /* 替换原有的固定宽度 */
    color: #5a5a5a;
    font-family: 'Widy-Thin';
    font-size: 14px;
    color: black;
}

修改后，两张卡片会分别填满网格的两列，配合gap:20px的间距，就能实现你想要的“各占页面一半（含间距）”的布局效果。

内容的提问来源于stack exchange，提问作者iMightjustGiveYouaBite