html css グリッドレイアウト テンプレ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
</head>

<style type="text/css">
body{font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;}

#baby-inner {display: grid; grid-template-columns:repeat(4, 3fr);}

.baby-catarogu {margin: 5px 0 25px 0;}
.baby-catarogu a {text-decoration: none;display: inline-block;background-color: #f2d398;padding: 10px 35px;color: #333;border-radius: 4px;}

.baby-catarogu a:hover{background-color:#de1a1a;color:#fff;}
.baby-catarogu a:active{background-color:#de1a1a;color:#fff;}

</style>

<body>

<div id="baby-container">
<div id="baby-inner">

<div class="baby-box">
<a href="#" target="_blank">
<img src="img/special_gourment_4000.jpg" alt="特選グルメコース カタログギフト 4000円">
</a>

<p class="baby-catarogu">
<a href="#" target="_blank">
電子カタログを見る
</a>
</p>
</div> <!-- baby-box END -->

<div class="baby-box">
<a href="#" target="_blank">
<img src="img/special_gourment_4500.jpg" alt="特選グルメコース カタログギフト 4500円">
</a>

<p class="baby-catarogu">
<a href="#" target="_blank">
電子カタログを見る
</a>
</p>
</div> <!-- baby-box 3800 END -->

<div class="baby-box">
<a href="#" target="_blank">
<img src="img/special_gourment_5000.jpg" alt="特選グルメコース カタログギフト 5000円">
</a>

<p class="baby-catarogu">
<a href="#" target="_blank">
電子カタログを見る
</a>
</p>
</div> <!-- baby-box 4300 END -->

<div class="baby-box">
<a href="#" target="_blank">
<img src="img/special_gourment_6000.jpg" alt="特選グルメコース カタログギフト 6000円">
</a>

<p class="baby-catarogu">
<a href="#" target="_blank">
電子カタログを見る
</a>
</p>
</div> <!-- baby-box 4800 END -->

<div class="baby-box">
<a href="#" target="_blank">
<img src="img/special_gourment_9000.jpg" alt="特選グルメコース カタログギフト 9000円">
</a>

<p class="baby-catarogu">
<a href="#" target="_blank">
電子カタログを見る
</a>
</p>
</div> <!-- baby-box 5800 END -->

<div class="baby-box">
<a href="#" target="_blank">
<img src="img/special_gourment_11000.jpg" alt="特選グルメコース カタログギフト 11000円">
</a>

<p class="baby-catarogu">
<a href="#" target="_blank">
電子カタログを見る
</a>
</p>
</div> <!-- baby-box 7800 END -->

<div class="baby-box">
<a href="#" target="_blank">
<img src="img/special_gourment_16000.jpg" alt="特選グルメコース カタログギフト 16000円">
</a>

<p class="baby-catarogu">
<a href="#" target="_blank">
電子カタログを見る
</a>
</p>
</div> <!-- baby-box 8800 END -->

<div class="baby-box">
<a href="#" target="_blank">
<img src="img/special_gourment_21000.jpg" alt="特選グルメコース カタログギフト 21000円">
</a>

<p class="baby-catarogu">
<a href="#" target="_blank">
電子カタログを見る
</a>
</p>
</div> <!-- baby-box 10800 END -->

<div class="baby-box">
<a href="#" target="_blank">
<img src="img/special_gourment_26000.jpg" alt="特選グルメコース カタログギフト 26000円">
</a>

<p class="baby-catarogu">
<a href="#" target="_blank">
電子カタログを見る
</a>
</p>
</div> <!-- baby-box 15800 END -->

<div class="baby-box">
<a href="#" target="_blank">
<img src="img/special_gourment_31000.jpg" alt="特選グルメコース カタログギフト 31000円">
</a>

<p class="baby-catarogu">
<a href="#" target="_blank">
電子カタログを見る
</a>
</p>
</div> <!-- baby-box 20800 END -->

<div class="baby-box">
<a href="#" target="_blank">
<img src="img/special_gourment_51000.jpg" alt="特選グルメコース カタログギフト 51000円">
</a>

<p class="baby-catarogu">
<a href="#" target="_blank">
電子カタログを見る
</a>
</p>
</div> <!-- baby-box 25800 END -->

</div> <!-- baby-inner END -->
</div> <!-- baby-container END -->

 

</body>
</html>