CODEWITHSUNDEEP
htmlcssejs
Tiger Abrodi
Tiger Abrodi

Reputation: 123

CSS - How can I display two different posts next to each other?

Currently, If I have two posts they position them self under/above one and other, but I want them to display next to each other, how can I go about doing that, also I would highly appreciate if someone could just have a general look into my CSS code, what is basically good and bad there :=D Big Thanks

admin.css

.grid {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.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

<%- include("../includes/head.ejs") %>
<link rel="stylesheet" href="/css/admin.css">
</head>

<body>
    <%- include("../includes/navigation.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>

    <%- include("../includes/footer.ejs") %>

Upvotes: 0

Views: 533

Answers (1)

Nidhin Joseph
Nidhin Joseph

Reputation: 10227

You can use a grid layout or a flex layout to achieve this.

Using Grid

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1em;
}

.post {
  height: 200px;
  background: #ccc;
}
<div class="grid">
  <div class="post"></div>
  <div class="post"></div>
</div>

Using Flexbox

.flex {
  display: flex;
  flex-flow: row;
}

.post {
  height: 200px;
  background: #ccc;
}

.flex .post {
  flex-grow: 1;
}

.flex .post:nth-child(2) {
  margin-left: 1em;
}
<div class="flex">
  <div class="post"></div>
  <div class="post"></div>
</div>

There is also other methods like using Floats, but grids and flexboxes would be more flexible.

Upvotes: 1

Related Questions