【メニューの均等横並び】シンプル複数行

目的

シンプルなメニューを1行に複数個、均等横並びにしたい。
メニュー数が多くなっても自動で改行され、複数行に対応した作りにしたい。
1行のメニュー数を簡単に可変可能にしたい。

実行結果

うどん

解説

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

HTML

<div class="layout_1_3">
	<div><a href="">うどん</a></div>
	<div><a href="">蕎麦</a></div>
	<div><a href="">スパゲッティー</a></div>
	<div><a href="">ラーメン</a></div>
	<div><a href="">焼きそば</a></div>
	<div><a href="">そうめん</a></div>
</div>

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

CSS

.layout_1_3 {
	background-color: #FFFFFF;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	width: 92%;
	padding-top: 0px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-left: 5px;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 40px;
	margin-left: auto;
	column-gap: 10px;
	row-gap: 10px;
	box-sizing: border-box;
}

.layout_1_3 div {
	display: flex;
	text-align: center;
	align-items: center;
	justify-content: center;
	height: 150px;
	border: dotted 1px #999999;
	box-sizing: border-box;
}

.layout_1_3 div a {
	font-size: 24px;
	color: #000000;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.layout_1_3 div a:hover {
	background-color: #EFEFEF;
}

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

.layout_1_3 {
	background-color: #FFFFFF;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	width: 98%;
	padding-top: 0px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-left: 5px;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 40px;
	margin-left: auto;
	column-gap: 10px;
	row-gap: 10px;
	box-sizing: border-box;
}

.layout_1_3 div {
	display: flex;
	text-align: center;
	align-items: center;
	justify-content: center;
	height: 120px;
	border: dotted 1px #999999;
	box-sizing: border-box;
}

.layout_1_3 div a {
	font-size: 20px;
	color: #000000;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.layout_1_3 div a:hover {
	background-color: #EFEFEF;
}

スマホ版の解説内容はPC版と同じなので、PC版をご覧ください。