Trying to print out my blog posts horizontally on the page

Question

I've tried to print them as columns, but that doesn't seem to work. Any ideas on how best to accomplish this??

<div class="post-block">
  <div v-for="(post,index) in posts" :key="post.slug + '_' + index">
    <router-link :to="'/blog/' + post.slug">
      <article class="media">
        <figure>
          <div class="posts"> 
            <img v-if="post.featured_image" :src="post.featured_image" alt="" style="max-width:25%;">
            <img v-else src="http://via.placeholder.com/250x250" alt="">
            <h2>{{ post.title }}</h2>
            <p>{{ post.summary }}</p>
          </div>
        </figure>
      </article>
    </router-link>
  </div>
</div>

  .post-block {
    background-color: #f8f8f8;
    color: #151515;
    position: relative;
  }

  p, h2 {
    color:#D3D3D3;
  }

Answer 1

You can try to update CSS like to create a responsive layout. Please update color scheme based on your requirement. Just sharing the basic layout you can use and update as needed:

.post-block {
  color: #151515;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.post-block>div {
  flex: 1 0 calc(26% - 10px);
  margin: 5px;
  padding: .5rem;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.03);
  border-radius: 4px;
  color: #84613D;
  font-family: "Lucida Console", Monaco, monospace;
  background: #FDF9EA;
  border-bottom: 1px solid #F9F2D6;
  border-right: 1px solid #F9F2D6;
}
.post-block .posts {
  text-align: center;
  align-items: center;
  margin:0 auto;
}

@media (max-width: 768px) {
  .post-block>div {
    flex-basis: calc(34% - 10px);
  }
}

@media (max-width: 320px) {
  .post-block>div {
    flex-basis: calc(51% - 10px);
  }
}

p,
h2 {
  color: #D3D3D3;
}

Working Demo ( _{Please resize the result window to see the responsive layout} )