【メニューの均等横並び】帯+画像

目的

帯の中にメニュー名を入れて、その下にサムネイル画像を入れたい。
メニュー数が多くなっても自動で改行され、複数行に対応した作りにしたい。
1行のメニュー数を簡単に可変可能にしたい。

実行結果

見出し

解説

3個を均等横並びにして複数行に対応しています。1行のメニュー数はCSSで簡単に増減可能です。

HTML

<div class="layout_1_4">
	<a href="https://note-book.foo/layout/2/">
		<div>見出し</div>
		<div><img src="../../image/thumbnail/layout/2.png" alt="見出し" /></div>
	</a>
	<a href="https://note-book.foo/layout/4/">
		<div>テキスト+画像</div>
		<div><img src="../../image/thumbnail/layout/4.png" alt="テキスト+画像" /></div>
	</a>
	<a href="https://note-book.foo/layout/5/">
		<div>画像メニュー</div>
		<div><img src="../../image/thumbnail/layout/5.png" alt="画像メニュー" /></div>
	</a>
	<a href="https://note-book.foo/layout/3/">
		<div>リスト</div>
		<div><img src="../../image/thumbnail/layout/3.png" alt="リスト" /></div>
	</a>
	<a href="https://note-book.foo/layout/6/">
		<div>テーブル</div>
		<div><img src="../../image/thumbnail/layout/6.png" alt="テーブル" /></div>
	</a>
	<a href="https://note-book.foo/layout/8/">
		<div>テクスチャー</div>
		<div><img src="../../image/thumbnail/layout/8.png" alt="テクスチャー" /></div>
	</a>
	<a href="https://note-book.foo/layout/1/">
		<div>均等横並び</div>
		<div><img src="../../image/thumbnail/layout/1.png" alt="均等横並び" /></div>
	</a>
	<a href="https://note-book.foo/layout/7/">
		<div>画像背景</div>
		<div><img src="../../image/thumbnail/layout/7.png" alt="画像背景" /></div>
	</a>
	<a href="https://note-book.foo/layout/9/">
		<div>動画</div>
		<div><img src="../../image/thumbnail/layout/9.png" alt="動画" /></div>
	</a>
</div>

メニューは1行3個にしています。1行の個数を変えたい場合のHTMLは修正不要で、CSSで簡単に調整が出来ます(後述)。

CSS

.layout_1_4 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	width: 96%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 40px;
	margin-left: auto;
	column-gap: 10px;
	row-gap: 10px;
}

.layout_1_4 > a {
	text-decoration: none;
	color: #000000;
	display: block;
	border: solid 1px #000000;
}

.layout_1_4 > a:hover {
	opacity: 0.7;
}

.layout_1_4 > a > div:first-of-type {
	font-size: 14px;
	font-weight: bold;
	background-color: #F5F5F5;
	text-align: center;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	border-bottom: dotted 1px #000000;
}

.layout_1_4 img {
	display: block;
	width: 100%;
	height: auto;
}

3行目のrepeat(3, 1fr)の3の部分が1行のメニュー数を表しています。1行を4個にしたければ4に変えるだけでOKです。HTMLの修正は不要です。