【CSS】グリッドレイアウトでシンプルな横並びメニューリスト

2017年12月12日2019年6月12日CSS,グリッドレイアウト

グリッドレイアウトCSSでヘッダー下に置く感じの横並びメニューを組んでみました

https://pastel.repop.jp/grid-layout/girid-menu-demo.html

普通のリストで良いのでHTML構造は単純に、リストタグではありませんが、、

<div id ="menus">
<a class="item">HOME</a>
<a class="item">HTML</a>
<a class="item">CSS</a>
<a class="item">JS</a>
<a class="item">PHP</a>
<a class="item">JQuery</a>
<a class="item">SQL</a>
<a class="item">SVG</a>
</div>

グリッドレイアウトCSS

#menus {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(120px, 1fr));
  grid-template-rows: 50px;
  grid-auto-rows: 50px;
  grid-gap: 2px;
}

.item {
  background:#ffcc99;
}

想定した挙動をさせるのに最低限必要な分だけです

使っているCSS

display: grid;
グリッドレイアウトと定義する

grid-template-columns:
横並びに対する要素の横幅を設定

grid-template-rows:
縦並びに対する要素の高さを設定

grid-auto-rows:
grid-template-rowsから溢れて段落になった分の要素の高さを設定

grid-gap:
要素同士のmargin
他が自動で入れ替わるので計算に入れる必要はない

repeat()

入力した数字分の横並びの数を指定できる
例えば3列ともレスポンシブに同じ幅で良いなら

grid-template-columns: 1fr 1fr 1fr;

grid-template-columns: repeat(3,1fr);

この２つの書き方は同じ結果になります

auto-fill
数値ではなくHTMLに使われている入れ子の要素数をあてる事ができます（たぶん）
今回はminmax()でリストの最低幅を指定してるので画面幅を狭めるとそれ以上は小さくならず2段目にに折り返してます
その際にgrid-auto-rowsで折り返した分の縦幅を指定しておく必要があるかと

minmax()
要素の幅の最低値と最大値を指定します
min-widthやmax-heightみたいな指定を纏めて記述できる感じです
レスポンシブの対応に良く使う事になりそうですね

———-
短いCSSの記述で期待した挙動ができるのは楽しいです

グリッドレイアウトのサンプル置き場コンテンツを作成しました
https://pastel.repop.jp/grid-layout/