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> 

あなたは間違いなく、ボタンやそれの応答性についてどのように