CSS - Как я могу отображать свои небольшие шаблоны сообщений рядом друг с другом

Question

Я пробовал много разных способов, как я могу отображать их рядом друг с другом, но проблема в том, что они все еще отображаются над / под одним и другим в левой части страницы, как я могу сделать так, чтобы они отображались Рядом друг с другом я опубликую часть CSS, относящуюся к файлу posts.ejs. Я хочу использовать Grid или Flex для этого!

admin.css

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    grid-auto-rows: minmax(100px, auto);
}

.grid .post {
    border: 4px dashed #207420;
    text-align: center;
    border-radius: 10px;
    width: 200px;
    height: 200px;
    box-shadow: 4px 4px 4px 8px rgba(0, 0, 0, 0.26);
}

posts.ejs

    <main>
        <% if (posts.length > 0) { %>

        <% for (let post of posts) { %>

        <div class="grid">
                <article class="post">
                    <h1><%=post.title%></h1>
                    <p><%=post.description%></p>
                    <a href="/post/<%=post._id%>">See Post</a>
                <article>

        </div>

        <% } %>
        <%  } else { %>

        <h1>No Posts Found</h1>
        <% } %>
    </main>

Answer 1

это потому, что вы создаете div с сеткой классов для каждого сообщения

Insead используйте цикл for внутри вашего div с сеткой классов

  <main>
        <% if (posts.length > 0) { %>


        <div class="grid">

            <% for (let post of posts) { %>

                <article class="post">
                    <h1><%=post.title%></h1>
                    <p><%=post.description%></p>
                    <a href="/post/<%=post._id%>">See Post</a>
                <article>

            <% } %>
        </div>


        <%  } else { %>

        <h1>No Posts Found</h1>
        <% } %>
    </main>