CSS Gridでカラム作成！2・3・4カラムを簡単に作る完全ガイド
生徒
「Webサイトでよく見る、横に2つや3つ記事が並んでいるレイアウトはどうやって作るんですか？」
先生
「それは『カラムレイアウト』と呼ばれています。最新のCSSでは『CSS Grid（グリッド）』という機能を使うと、驚くほど簡単に作れますよ。」
生徒
「グリッド……方眼紙みたいなイメージですか？難しそうですが、初心者でもできますか？」
先生
「もちろんです！たった2行の魔法のコードを書くだけで、2カラムでも4カラムでも自由自在に並べられます。基本から一緒に見ていきましょう！」
1. CSS Gridレイアウトとは？カラム作りの新常識
Webデザインにおけるカラムとは、ページを縦に分割した「列」のことです。例えば、左側に記事、右側にメニューがある構成は「2カラム」、商品が横に3つ並んでいれば「3カラム」と呼びます。
以前はこれを作るために非常に複雑な設定が必要でしたが、現在はCSS Grid（シーエスエス・グリッド）という機能が主流です。これは、親要素（コンテナ）に「横に何個並べるか」というルールを決めるだけで、その中に入れた要素（子要素）を自動的に整列させてくれる、非常に便利な仕組みです。方眼紙のマス目を作るように直感的に操作できるため、パソコンの操作に不慣れな初心者の方にこそおすすめの技術です。
2. 基本の2カラムレイアウトを作ってみよう
まずは、最もシンプルな2カラム（2列並び）を作ってみましょう。使うプロパティは display: grid; と grid-template-columns です。この grid-template-columns という単語は、「グリッドの・テンプレートの・列」という意味で、列の幅をどうするかを指定するために使います。
ここで便利なのが fr（エフアール） という単位です。これは「割合（fraction）」を意味し、 1fr 1fr と書くと「半分ずつの幅で2つ並べる」という指定になります。ピクセルなどで細かく計算しなくていいので、とても楽ちんです！
<style>
.grid-container-2 {
display: grid;
/* 1対1の比率で2列に分ける */
grid-template-columns: 1fr 1fr;
gap: 10px; /* 隙間を作る設定 */
}
.grid-item {
background-color: #ffadad;
padding: 20px;
text-align: center;
border: 1px solid #333;
}
</style>
<div class="grid-container-2">
<div class="grid-item">カラム 1</div>
<div class="grid-item">カラム 2</div>
</div>
3. 応用編：サイドバー付きの2カラム設計
「左側を少し細くして、右側のメイン記事を広くしたい」という場合も、比率を変えるだけで簡単です。例えば 1fr 3fr と書けば、右側が左側の3倍の広さになります。これを使えば、オシャレなサイドバー付きのブログレイアウトが完成します。
<style>
.grid-sidebar {
display: grid;
/* 左を小さく、右を大きく（1：3の比率） */
grid-template-columns: 1fr 3fr;
gap: 10px;
}
.side { background-color: #ffd6a5; padding: 10px; }
.main { background-color: #fdffb6; padding: 10px; min-height: 100px; }
</style>
<div class="grid-sidebar">
<div class="side">メニュー</div>
<div class="main">メインの記事がここに入ります</div>
</div>
4. repeatを使って3カラムを短く書く方法
要素が3つ、4つと増えていくときに 1fr 1fr 1fr... と書くのは少し面倒ですよね。そこで登場するのが repeat（リピート）関数 です。これはプログラミング特有の「繰り返し」を命令する言葉で、 repeat(3, 1fr) と書くと「1frを3回繰り返してね」という意味になります。
これを使えば、商品一覧ページのように横にたくさんのアイテムを並べる3カラムや4カラムのレイアウトが、魔法のように一瞬で作成できます。修正も、数字の「3」を「4」に変えるだけなので、初心者の方でも間違いにくくなります。
<style>
.grid-container-3 {
display: grid;
/* 同じ幅で3列作る */
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
.card {
background-color: #caffbf;
padding: 15px;
border-radius: 8px;
text-align: center;
}
</style>
<div class="grid-container-3">
<div class="card">商品A</div>
<div class="card">商品B</div>
<div class="card">商品C</div>
</div>
5. ギャラリーサイトに最適！4カラムの作り方
写真素材サイトやギャラリーサイトのように、さらに多くの要素を並べるのが4カラムです。やり方は先ほどと同じで、 repeat(4, 1fr) と指定します。ここでは、画像（サンプル画像）を中に入れて、実際の見た目に近づけてみましょう。
要素が並びきらなくなると、CSS Gridは自動的に「次の行」へと要素を送ってくれます。つまり、1行に4つずつ、何段になってもきれいなグリッドを保ってくれるのです。これが、現代のWebサイト制作にCSS Gridが欠かせない大きな理由です。
<style>
.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.photo-frame {
background-color: #a0c4ff;
padding: 5px;
}
.photo-frame img {
width: 100%;
height: auto;
display: block;
}
</style>
<div class="gallery">
<div class="photo-frame"><img src="/img/sample120-120.jpg" alt="1"></div>
<div class="photo-frame"><img src="/img/sample120-120.jpg" alt="2"></div>
<div class="photo-frame"><img src="/img/sample120-120.jpg" alt="3"></div>
<div class="photo-frame"><img src="/img/sample120-120.jpg" alt="4"></div>
</div>
6. 隙間（ギャップ）を調整してデザインを整える
カラム同士がピッタリくっついていると、中身が読みにくくなってしまいます。そこで活躍するのが gap プロパティです。これはマス目とマス目の間の「溝」の広さを指定するものです。
以前は余白を作るために「マージン（外側の余白）」を計算して設定していましたが、Gridなら gap: 20px; と書くだけで、要素の間にだけ均等に余白が入ります。一番外側には余白がつかないので、レイアウトが左右にズレる心配もありません。このスマートな余白管理も、初心者の方にぜひ覚えていただきたいポイントです。
7. 初心者が知っておきたい自動配置のルール
「4カラムを指定したのに、要素が2つしかないときはどうなるの？」という疑問を持つかもしれません。その場合、Gridは左側の1番目と2番目のマスに要素を置き、残りの3番目と4番目は空席のままにしてくれます。要素が5つ目になれば、自動的に2段目の1番目に移動します。
このように、中身の数が増減してもレイアウト全体が壊れないことを堅牢なデザインと言います。CSS Gridを使えば、自分で「ここで改行して」という命令を書かなくても、自動ですべてを管理してくれるので、まるでプロのデザイナーが横で整列を手伝ってくれているような感覚になれるはずです。
8. レスポンシブデザインへの第一歩
今のWeb制作で最も重要なのは、スマホとパソコンの両方できれいに見えるようにすること（レスポンシブデザイン）です。CSS Gridを使えば、これが驚くほど簡単に実現できます。
例えば、「スマホでは1列（1カラム）、パソコンでは3列（3カラム）」にしたい場合、 grid-template-columns の設定を少し変えるだけです。詳しい方法は後の章で学びますが、まずは「CSS Gridの数字を変えるだけで、横並びの数が自由自在に変わるんだ！」という魔法の仕組みを実感してください。これまで難しそうに見えていたWebサイトの構造が、自分でも作れる身近なものに変わるはずですよ！
