(Sample)
「写真とテキストを横に並べたい！」というWebデザインの基本的なニーズに対して、これまではfloatやflexboxを使って対応してきました。
でも、最も自由度が高く、直感的にレイアウトを組める方法が、今回紹介する CSS Grid（グリッド） です！
CSS Gridとは？
2次元の「マス目」でレイアウトを管理できる仕組み
Flexboxは“1次元”のレイアウト（横並び or 縦並び）に強いですが、Gridは「縦」と「横」の両方を一度に制御できるのが最大の強みです。
たとえるなら、Flexboxが“横一列の棚”なら、Gridは“表（Excelのようなもの）”です。
今回のコードの全体構造
<div class="container">
<div class="image-column">画像</div>
<div class="text-column">テキスト</div>
</div>
このシンプルなHTML構造に対して、Gridで「列の数」と「比率」をCSSで定義することで、レスポンシブかつ綺麗な横並びレイアウトが実現できます。
GridのCSS部分をやさしく分解！
スマホ画面では1列（縦並び）
.container {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
display: grid：Gridレイアウトを有効化grid-template-columns: 1fr：1列の構成。全体を縦に並べる設定gap: 20px：要素間のすき間を20px確保
タブレット以上では2列（横並び）
@media (min-width: 768px) {
.container {
grid-template-columns: 1fr 2fr;
}
}
- 画面幅768px以上でレイアウトを切り替え
1fr 2frは「写真：テキスト = 1:2の幅」という比率の指定です
横に並ぶ仕組みを図で解説！
● スマホ画面（縦並び）
+--------------------+
| 写真 |
+--------------------+
| テキスト |
+--------------------+
● タブレット・PC画面（横並び）
+---------+-------------------+
| 写真 | テキスト |
| (1fr) | (2fr) |
+---------+-------------------+
このように、画面幅によってレイアウトが動的に変わるのがレスポンシブ対応の強みです！
Flexboxとの違いは？
| 比較項目 | Flexbox | Grid |
|---|---|---|
| 並べ方 | 1次元（横または縦） | 2次元（横＋縦） |
| レイアウトの柔軟性 | 中程度 | 高い |
| センター揃えなど | 得意 | 得意 |
| 要素の配置制御 | 柔軟だけど順番に依存 | 行・列ごとに精密に配置できる |
| 使いどころ | シンプルな横並び・上下並び | 表形式・複雑なレイアウト全般 |
Gridは複数行・複数列を扱うデザインに強いので、カード型レイアウトや雑誌風の構成などにも最適です。
よくあるGridの便利テクニック
| テクニック | 設定方法 | 説明 |
|---|---|---|
| 要素間の余白 | gap | 要素間のすき間を簡単に調整 |
| 3列にしたい | grid-template-columns: 1fr 1fr 1fr | 均等な3列を作成 |
| 列幅の自動調整 | autoやminmax() | 内容に応じて幅を変えることができる |
| 中央寄せ | justify-itemsやalign-items | 簡単に中央揃え可能 |
今回のGridコードをもっと強化するなら？
例えば、テキストの配置や画像の縦位置を中央にしたい場合、次のような指定が有効です。
.text-column {
display: flex;
align-items: center;
}
→ Grid内でさらにFlexboxを使って、「縦位置の中央揃え」も簡単に実現できます！
まとめ：Gridレイアウトはこんなときに最強！
Gridが向いているケース
- 写真と文字を比率で制御したい
- レスポンシブ対応をコード少なく実装したい
- 複雑な段組み（3列、4列）が必要
- 縦横両方を自由自在に調整したい
今後の学習のステップ
CSS Gridを使いこなせるようになったら、次のチャレンジへ進んでみましょう！
grid-template-areasで名前付きレイアウトrepeat()関数を使って動的な列数の制御minmax()を使った自動サイズ調整auto-fitやauto-fillを使ってレスポンシブなグリッド配置
FlexboxとGrid、両方の特性を使い分けられるようになると、どんなレイアウトも自由自在にコントロールできるようになります。