带有完美框的HTML网格

Question

我想创建一个像这样的缩略图： https://mmmastery.com/mastermind/

风格相同。

我的html和css在这里：https://jsfiddle.net/1Lc97z7t/

<div id="wrapper" style="width: 80%; border: 1px solid red;">

<div class="box" style="width:20%">
    <img src="https://mmmastery.com/mastermind/wp-content/uploads/2015/11/infusionsoft-theory-of-automation.png">
    <h3>The Theory of Automation</h3>
    <button>Access Now</button>
</div>

<div class="box" style="width:20%">
    <img src="https://mmmastery.com/mastermind/wp-content/uploads/2015/11/infusionsoft-theory-of-automation.png">
    <h3>The Theory of Automation</h3>
    <button>Access Now</button>
</div>

<div class="box" style="width:20%">
    <img src="https://mmmastery.com/mastermind/wp-content/uploads/2015/11/infusionsoft-theory-of-automation.png">
    <h3>The Theory of Automation</h3>
    <button>Access Now</button>
</div>

<div class="box" style="width:20%">
    <img src="https://mmmastery.com/mastermind/wp-content/uploads/2015/11/infusionsoft-theory-of-automation.png">
    <h3>The Theory of Automation</h3>
    <button>Access Now</button>
</div>

<div class="box" style="width:20%">
    <img src="https://mmmastery.com/mastermind/wp-content/uploads/2015/11/infusionsoft-theory-of-automation.png">
    <h3>The Theory of Automation</h3>
    <button>Access Now</button>
</div>

<div class="box" style="width:20%">
    <img src="https://mmmastery.com/mastermind/wp-content/uploads/2015/11/infusionsoft-theory-of-automation.png">
    <h3>The Theory of Automation</h3>
    <button>Access Now</button>
</div>

</div>

任何想法我应该添加到我的CSS中，以使其看起来完全相同并在屏幕尺寸减小时做出响应。

如果你能告诉我JSFIDDLE。

Answer 1

<div class="ld_course_grid col-sm-6 col-md-4">
   <article id="post-9603" class="thumbnail course sfwd-courses type-sfwd-courses has-post-thumbnail">


          <a href="//mmmastery.com/mastermind/the-theory-of-automation/" rel="bookmark">
        <img src="//mmmastery.com/mastermind/wp-content/uploads/2015/11/infusionsoft-theory-of-automation.png" class="attachment-course-thumb wp-post-image" alt="infusionsoft-theory-of-automation" />    </a>
          <div class="caption">
        <h3 class="entry-title">The Theory of Automation</h3>
              <p><a class="btn shadow  btn-block coursebtn" role="button" href="//mmmastery.com/mastermind/the-theory-of-automation/" rel="bookmark">Start Course</a></p>
      </div><!-- .entry-header -->
    </article><!-- #post-## -->
  </div> 

你绝对可以复制它