如何在EJS中遍历JSON并为每个项单独设置卡片样式

布局嵌套异常的核心原因是EJS循环内的<article>卡片标签未添加闭合标签</article>，浏览器解析DOM结构时会默认将后续未闭合的元素识别为前一个未闭合<article>的子元素，最终呈现出层级嵌套的错位效果。

<section class="job-list">
    <% if (job.length > 0) { %>
        <div class="grid">
            <%for(var i = 0; i < job.length; i++){ %> 
                <article class="card listing-item">
                    <header class="card__header">
                        <img src="<%= job[i].logo %>" alt="">
                    </header>
                    <div class="card__content">
                        <div class="card_content_top">
                            <p class="position_postedAt"><%= job[i].postedAt %></p>
                            <p class="position_contract"><%= job[i].contract %></p>
                        </div>
                        <div class="card_content_bottom">
                            <h1 class="position__position"><%= job[i].position %></h1>
                            <h3 class="position__company">$<%= job[i].company %></h3>
                            <p class="position__location"><%= job[i].location %></p>
                        </div>
                    </div>
                </article> <!-- 补充缺失的article闭合标签 -->
            <% } %>        
        </div>
    <% } else { %>
        <h1>今日暂无职位信息！</h1>    
    <% } %>
</section>

如果添加闭合标签后布局仍不符合预期，可检查以下CSS配置：

• 确认.grid类已正确设置网格布局属性，参考配置：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  width: 100%;
  box-sizing: border-box;
}

• 检查.card类是否存在异常的float、position: absolute、负边距等会破坏网格流的属性。

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