DEMO

HTML

		<div class="contentgroup">
 <div class="content">
  <img src="画像URL" width="100%">
  <p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
  <a href="リンク先URL"><span>詳しくはコチラ</span></a>
 </div>
 <div class="content">
  <img src="画像URL" width="100%">
  <p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
  <a href="リンク先URL"><span>詳しくはコチラ</span></a>
 </div>
</div>
	
<div class="contentgroup">
 <div class="content">
  <img src="画像URL" width="100%">
  <p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
  <a href="リンク先URL"><span>詳しくはコチラ</span></a>
 </div>
 <div class="content">
  <img src="画像URL" width="100%">
  <p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
  <a href="リンク先URL"><span>詳しくはコチラ</span></a>
 </div>
</div>

		

HTML説明

画像の設定方法
「画像URL（3.8.16.21行目）」のテキストを任意の画像のURLに書き換えてください。

リンク先の設定方法
「リンク先（5.10.18.23行目）」のテキストを任意のURLに書き換えてください。

1個ずつブロックを減らす方法
「 class="content"（2～6.7～11.15～19.20～24行目）」（）内を1つの塊として削除してください。
増やす場合は下記の2つのブロックの塊で増やしてください。
こちらで増やすと横並びのまま続いていってしまいます。

2つのブロックを増減させる方法
「 class="contentgroup"（1～12.14～25.行目）」（）内を1つの塊として増減させてください。

CSS

		<style>
 .contentgroup{
   width: 100%;
   max-width: 640px;
   margin: 0 auto;
   display: flex;
   justify-content: center;
   }
 .content{
   max-width: 260px;
   padding: 3%;
   margin: 2px;
   border: solid 3px #dbdbdb;
   border-radius: 10px;
   box-shadow: 0px 10px 10px rgba(0, 0, 0, .05);
   }
 .content p{
   font-size: 12px;
   margin: 10px 0;
   text-align: left;
   display: -webkit-box;
   overflow: hidden;
   -webkit-box-orient:vertical;
   -webkit-line-clamp:4;
   }
 .content a {
   display: block;
   background: #f991f6;
   border-bottom: solid 3px #d774d4;
   border-radius: 5px;
   color: #FFF;
   text-decoration: none;
   text-align: center;
   padding: 2.5% 0;
   font-size: 12px;
   }
</style>
		

CSS説明

ボタンの色の変更方法
各色コードを任意のものに書き換えてください。
ボタンの色＝28行目
ボタンの下線色＝29行目

テキストの表示量の変更方法
24行目の数字を変更してください。
この数字で●行以上は非表示（…と省略）という処理になっています。