Gridのgrid-template-columnsの罠
固定のトップナビゲーションをGridレイアウトで実現しようとしたとき、プロパティgrid-template-columnsでハマってしまった。この罠について解説する。
例：ウィンドウ幅に合わせた自動グリッド
やりたかったこと：
- 5つのカテゴリページのリンクをトップナビゲーションに表示する
- カテゴリページのリンクのリストを作成する
- 言語切り替えフォーム要素を追加する
- 言語切り替えのコンボボックスを配置する
- 画面幅のサイズに応じたGridレイアウトの変更
- メディアクエリやJSを使わない
コード
先に実現したいことに対する正解のコードから提示する。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Grid Layout</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<nav class="topnav">
<!-- トップナビゲーション -->
<ul class="nav-list">
<li class="nav-item"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">Articles</a></li>
<li class="nav-item"><a href="#" class="nav-link">Geogrphy</a></li>
<li class="nav-item"><a href="#" class="nav-link">Tech</a></li>
<li class="nav-item"><a href="#" class="nav-link">Languages</a></li>
<ul>
<!-- 言語切り替えコンボボックス -->
<form class="lang-form" method="post" action="lang_select.php">
<label for="lang-selector">Language</label>
<select id="lang-selector" class="lang-selector">
<option value="en">English</option>
<option value="ja">日本語</option>
</select>
</form>
</nav>
</div>
</header>
<!-- 省略 -->
</body>
</html>
必要に応じてborderやoutlineプロパティのコメントアウトを解除し、その要素のコンテンツ領域を確認すると分かりやすいです。
style.css
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.topnav {
display: grid;
grid-template-columns: 1fr auto;
/* outline: 3px solid green; */
}
.nav-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
/* border: 3px dashed blue; */
}
.lang-form {
margin-block: auto;
/* border: 3px dashed red; */
}