如何修正基于屏幕宽高比的JS/CSS名片网格布局问题？

问题根源 #

1. 大屏幕下单列显示：Grid布局被错误应用在.resultsDiv容器上，而动态生成的名片实际插入到了子容器#results中，导致Grid规则未作用到名片元素。
2. 小屏幕下居中与留白：未针对小屏幕设置居中规则，且容器无内边距导致内容贴边，视觉体验差。

解决方案 #

将Grid布局移至#results容器，添加媒体查询优化小屏幕显示，并调整容器内边距避免内容贴边：

修改后的CSS代码 #

/* 外层容器：添加内边距避免内容贴边 */
.resultsDiv {
    padding: 20px;
}

/* 名片网格容器：正确应用Grid布局 */
#results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px; /* 替代grid-gap，符合现代CSS规范 */
}

.business-card {
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 8px; /* 可选优化：添加圆角提升视觉效果 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 可选优化：添加阴影增强层次感 */
}

.business-card img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.business-card h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.business-card p {
    margin-bottom: 5px;
}

/* 小屏幕适配（768px以下） */
@media (max-width: 768px) {
    #results {
        grid-template-columns: 1fr; /* 强制单列 */
        justify-items: center; /* 名片水平居中 */
    }

    .business-card {
        max-width: 350px; /* 限制名片最大宽度，避免过宽影响可读性 */
        width: 100%;
    }
}

JavaScript代码无需修改 #

你的JavaScript逻辑正常，名片生成与插入功能没有问题，仅需调整CSS布局即可解决问题。

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