Web制作でリスト（<li>タグ）を並べるとき、横方向（row）に配置するケースが一般的です。
しかし、縦方向（column）にリストを並べたい場面もあります。
この記事では、CSS Gridを使ってリストを縦に並べる方法を解説します。
✅ リストを縦に並べるには？
通常、リストはFlexboxで横並び・縦並びを切り替えることが多いですが、
Grid Layoutを使うと「内容に応じた列幅の自動調整」も簡単に実現できます。
以下のCSSを設定することで、
縦方向にリストを並べ、内容に応じて横幅を自動で調整できます。
ul {
display: grid;
grid-template-rows: repeat(3, auto); /* 行を明示的に指定 */
grid-auto-flow: column; /* 縦方向に並べてから次の列へ */
grid-auto-columns: max-content; /* 列幅を内容に応じて自動調整 */
}
💡 コードのポイント解説
① grid-template-rows: repeat(3, auto);
• リストを「3行」に分けて配置します。
• 行数を指定することで、縦方向の並びが明確になります。
② grid-auto-flow: column;
• 縦方向にアイテムを配置し、3行分埋まったら次の列へ自動的に移動します。
• 通常は横方向（row）がデフォルトですが、columnを指定することで縦並びに。
③ grid-auto-columns: max-content;
• 各列の幅をリスト項目（li）の内容に合わせて自動調整します。
• 長い文字列があっても、レイアウトが崩れず美しく整列します。
🧩 サンプルコード
🔁 列ごとに異なる行数を指定したい場合
さらに柔軟なレイアウトとして、「列ごとに異なる行数を設定したい」というケースもあります。
たとえば、1列目に4つ、2列目に3つのアイテムを縦に並べたいときは、
以下のように、grid-columnを使って手動で振り分けることで実現できます。
ul {
display: grid;
justify-content: start; // 左寄せ
grid-template-columns: repeat(2, max-content); // 2列を明示的に指定
grid-auto-rows: auto; // 行の高さは内容に応じて
grid-auto-flow: column; // 縦方向に並べてから次の列へ
gap: 0 16px; // 行間（row）と列間（column）
li {
white-space: nowrap; // 改行を防ぐ
}
// 1列目に4つ
li:nth-child(1),
li:nth-child(2),
li:nth-child(3),
li:nth-child(4) {
grid-column: 1;
}
// 2列目に3つ
li:nth-child(5),
li:nth-child(6),
li:nth-child(7) {
grid-column: 2;
}
}🔁 列を幅いっぱいに等間隔で並べたい
さらに柔軟なレイアウトとして、「列を幅いっぱいに等間隔で並べたい」というケースもあります。
以下のように、justify-contentを使って自動で設定することで実現できます。
ul {
display: grid;
grid-template-rows: repeat(3, auto); /* 行を明示的に指定 */
grid-auto-flow: column; /* 縦方向に並べてから次の列へ */
grid-auto-columns: max-content; // 列幅は内容に応じて自動調整
//列をいっぱいに広げる時に使用-----
width: 100%; // 幅いっぱいに広げる
justify-content: space-between; // 等間隔配置
}
🔁 列を中央で等間隔に並べたい
先ほどとは違い、「列を中央で等間隔に並べたい」というケースもあります。
以下のように、justify-contentを使って自動で設定することで実現できます。
ul {
display: grid;
grid-template-rows: repeat(3, auto); // 行を明示的に指定
grid-auto-flow: column; // 縦方向に並べてから次の列へ
grid-auto-columns: max-content; // 列幅は内容に応じて自動調整
//列を中央で等間隔で並べる時に使用-----
grid-template-columns: repeat(auto-fit,minmax(max-content)); // 最大内容幅で自動調整
justify-content: center; // グリッド全体を中央寄せ
gap:0 3em;// 行間（row）と列間（column）
}
🔍 まとめ
| 設定 | 効果 |
|---|---|
| grid-template-rows | 行数を固定（縦並び基準） |
| grid-auto-flow: column | 縦方向→次の列への自動配置 |
| grid-auto-columns: max-content | 内容に応じた横幅を自動調整 |
| grid-column | アイテムを手動で列指定（任意の行数配置） |
CSS Gridを使えば、単なる縦並びではなく「整然とした縦並び＋自動幅調整」を実現できます。
Flexboxでは難しい細かい制御も、Gridならシンプルな数行で完結です。
