Let's start by designing the layout and content for a single blog post. At the very least, a blog post should have: a title, post-meta, description, and a read more link. Open up the flexbox.ejs file and replace the first column's code with this new code:

<div class="col-md-4 child"> 
  <h3><a href="#">Blog Post Title</a></h3> 
  <p><small>Posted by <a href="#">Admin</a> on January 1, 2016</small></p> 
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget ornare lacus. Nulla sed vulputate mauris. Nunc nec urna vel sapien mattis consectetur sit amet eu tellus.</p> 
  <p><a href="#">Read More</a></p> 
</div> 

Let me breakdown what is happening here:

Now go ahead and copy and paste this code into the other two columns. If you want to play around with the length of the description text, feel free. For this example I'm going to keep it the same. When you're done, the entire page code should look like this. Note, I added the container <div> back in:

<div class="container"> 
  <div class="row"> 
    <div class="col-md-4 child"> 
      <h3><a href="#">Blog Post Title</a></h3> 
      <p><small>Posted by <a href="#">Admin</a> on January 1, 2016</small></p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget ornare lacus. Nulla sed vulputate mauris. Nunc nec urna vel sapien mattis consectetur sit amet eu tellus.</p> 
      <p><a href="#">Read More</a></p> 
    </div> 
    <div class="col-md-4 child"> 
      <h3><a href="#">Blog Post Title</a></h3> 
      <p><small>Posted by <a href="#">Admin</a> on January 1, 2016</small></p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget ornare lacus. Nulla sed vulputate mauris. Nunc nec urna vel sapien mattis consectetur sit amet eu tellus.</p> 
      <p><a href="#">Read More</a></p> 
    </div> 
    <div class="col-md-4 child"> 
      <h3><a href="#">Blog Post Title</a></h3> 
      <p><small>Posted by <a href="#">Admin</a> on January 1, 2016</small></p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget ornare lacus. Nulla sed vulputate mauris. Nunc nec urna vel sapien mattis consectetur sit amet eu tellus.</p> 
      <p><a href="#">Read More</a></p> 
    </div> 
  </div> 
</div> 

Save your file, do a harp compile if you haven't done so for in a while. Then do a harp server to launch the web server and head to http://localhost:9000 to preview the page. It should look like this:

Great, now we have a decent-looking blog homepage. However, we need to add more posts to fill this out. Let's go ahead and add more column <div>s inside the same row. Since this is Flexbox, we don't need to start a new <div> with a row class for each row of posts. Let's add three more posts in then see what it looks like:

Perfect. Now our homepage is starting to take shape. Continue adding more posts until you have a number that you are happy with. At this point you should have a decent understanding of the Flexbox grid.