Foreach循环无法正确显示内容

Question

我正在使用node.js及其表达的框架来创建电影图像库。 foreach循环用于将数据显示到页面上。图片库应在每行中显示4张图片。由于某些明显的原因，当在页面上显示时，布局网格已损坏，并且正在复制图像。如何为我的图库创建没有重复数据的网格布局？

index.ejs

<!-- Photo Grid -->
<div class="row-image">
    <% movies.forEach(function(movies) { %>
  <div class="column">
      <a href="/movies/<%=movies._id %>"><img src="<%= movies.image %>" style="width:100%"></a>
        <div class="desc">
            <a href="/movies/<%=movies._id %>"><%= movies.name %></a>
      </div>

  </div>
  <div class="column">
      <a href="/movies/<%=movies._id %>"><img src="<%= movies.image %>" style="width:100%"></a>
        <div class="desc"><a href="/movies/<%=movies._id %>"><%= movies.name %></a></div>
  </div>  
</div>
<% } ); %>

main.css

* {
   box-sizing: border-box;
 }




 .row-image {
   display: -ms-flexbox; /* IE10 */
   display: flex;
   -ms-flex-wrap: wrap; /* IE10 */
   flex-wrap: wrap;
   padding: 0 14px;
 }

 /* Create four equal columns that sits next to each other */
 .column {
   -ms-flex: 25%; /* IE10 */
   flex: 25%;
   max-width: 25%;
   padding: 0 4px 20px;  
 }

 .column img {
   margin-top: 8px;
   vertical-align: middle;
   width: 100%;
   border-radius: 9px;
 }




 .desc a:hover {
   text-decoration: none;
   color: #b3b3b3;
 }

 /* Responsive layout - makes a two column-layout instead of four columns */
 @media screen and (max-width: 800px) {
   .column {
     -ms-flex: 50%;
     flex: 50%;
     max-width: 50%;
   }
 }

 /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
 @media screen and (max-width: 600px) {
   .column {
     -ms-flex: 100%;
     flex: 100%;
     max-width: 50%;
   }
 }