puresccでタイル表示のサンプルを作成してみました。
該当部をコピペし、画像を差し替え頂ければ簡単に使用できます。
ご自由にお使いください。
<!DOCTYPE html>
<html>
<head>
<!-- メタ情報 START -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width">
<meta name="robots" content="index,follow,noarchive" />
<meta http-equiv="content-language" content="ja" />
<!-- メタ情報 END -->
<title>サンプル5</title>
<!-- CSS インポート START -->
<link rel="stylesheet" href="./build/pure-min.css">
<link rel="stylesheet" href="./build/baby-blue.css">
<link rel="stylesheet" href="./build/main.css">
<style>
.l-box {
padding: 1em;
}
.index-box {
padding: 0 1em;
}
</style>
<!-- CSS インポート END -->
</head>
<body>
<!-- グローバル START -->
<div class="content">
<!-- 会社情報 およびメニュー background-colorのところで背景色を変更-->
<h2 id="horizontal-menu" class="content-subhead">サンプル会社<a href="#horizontal-menu" class="content-link"></a></h2>
<div class="pure-menu pure-menu-open pure-menu-horizontal" style="background-color: #FFD464;">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">会社概要</a></li>
<li class="pure-menu-selected"><a href="#">技術紹介</a></li>
<li style="background-color: #FFD464;"><a href="#">お問い合わせ</a></li>
</ul>
</div>
<br>
<!-- ヘッダー -->
<header>
<h2>タイル</h2>
</header>
<!-- メイン -->
<p>画像でタイル</p>
<div class="pure-g-r">
<div class="pure-u-1-3">
<div class="index-box">
<div class="pure-u-1 l-centered">
<img src="./build/image.jpg">
</div>
</div>
</div>
<div class="pure-u-1-3">
<div class="index-box">
<div class="pure-u-1 l-centered">
<img src="./build/image.jpg">
</div>
</div>
</div>
<div class="pure-u-1-3">
<div class="index-box">
<div class="pure-u-1 l-centered">
<img src="./build/image.jpg">
</div>
</div>
</div>
</div>
<br>
<p>CSSでタイル-1</p>
<div class="pure-g-r">
<div class="pure-u-1-2">
<div class="index-box" style="height:250px;width:250px;background-color: #B7B7B7;color:#ffffff;">
aaaaaa
</div>
</div>
<div class="pure-u-1-2">
<div class="index-box" style="height:250px;width:250px;background-color: #B7B7B7;color:#ffffff;">
bbbbb
</div>
</div>
</div>
<br>
<p>CSSでタイル-2</p>
<div class="pure-g-r">
<div class="pure-u-1-3">
<div class="index-box" style="height:150px;width:150px;background-color: #2FCDB4;color:#ffffff;">
aaaaaa
</div>
</div>
<div class="pure-u-1-3">
<div class="index-box" style="height:150px;width:150px;background-color: #2FCDB4;color:#ffffff;">
bbbbb
</div>
</div>
<div class="pure-u-1-3">
<div class="index-box" style="height:150px;width:150px;background-color: #2FCDB4;color:#ffffff;">
bbbbb
</div>
</div>
</div>
<br>
<!-- フッター background-colorのところで背景色を変更-->
<div class="footer">
<div class="pure-g-r" style="background-color: #FFD464;">
<div class="pure-u-1-3">
AAAAA
</div>
<div class="pure-u-1-3">
BBBBB
</div>
<div class="pure-u-1-3">
CCCCC
</div>
</div>
</div>
</div>
</body>
</html>
