如何用CSS Grid样式化API数据？网格布局异常问题排查

问题原因 #

你遇到的逗号是因为map方法返回的是字符串数组，直接把数组传给insertAdjacentHTML时，数组元素会被默认用逗号分隔，这些逗号被CSS Grid识别成了独立的网格项目，所以出现在单独的列里；另外当前grid-template-columns: auto auto的设置也不够灵活，无法自适应不同屏幕。

解决方案 #

1. 修正JavaScript代码

将map返回的数组用join('')拼接成单个字符串，消除分隔逗号：

const url = "https://dummyapi.io/data/v1/user";

const getAllPosts = async() => {
  const response = await fetch(url, {
    method: "GET",
    headers: {
      "app-id": "63a7f2379ffe7f84dc337b03"
    }
  })
  return response.json();
}

document.addEventListener("DOMContentLoaded", async() => {
  const allPosts = await getAllPosts();
  const displayPost = allPosts.data.map(post => {
    return `
        <div class="post">
            <div class="image">
                <img src=${post.picture} alt="Profile picture" class="ppic" />
            </div>
            <div class="post-text">
                <p>${post.id}</p>
                <p>${post.title.charAt(0).toUpperCase() + post.title.slice(1)} ${post.firstName} ${post.lastName}</p>
            </div>
        </div>
        `
  }).join(''); // 拼接数组为字符串，消除逗号
  document.querySelector("#all-posts").insertAdjacentHTML("afterbegin", displayPost);
});

2. 优化CSS Grid布局

把grid-template-columns改成自适应写法，让布局更灵活：

*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.ppic {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* 可选：给头像加圆角更美观 */
}

.post {
  display: flex;
  align-items: center; /* 可选：让头像和文字垂直居中 */
  gap: 15px;
  padding: 10px;
  border: 1px solid #eee; /* 可选：加边框区分每个卡片 */
  border-radius: 8px;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 自适应列数 */
  gap: 15px;
  padding: 10px;
}

3. HTML部分保持不变

<section class="container" id="all-posts"></section>

效果说明 #

修改后，每个.post元素会作为独立的网格项目排列，逗号会被完全消除，同时Grid布局会根据屏幕宽度自动调整列数，适配不同设备。

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