先生と生徒の会話形式で理解しよう

生徒

「Webページって、文字や画像がきれいに並んでますよね。どうやって配置しているんですか？」

先生

「CSSのレイアウト機能を使っています。その中でも、gridという仕組みがとても便利です。」

生徒

「gridって難しそうな名前ですが、初心者でも使えますか？」

先生

「大丈夫です。マス目に並べるイメージで考えると、とても分かりやすいですよ。」

1. CSSグリッドレイアウトとは何か

CSSグリッドレイアウトは、Webページの中身をきれいに整列させるための配置方法です。 display: grid を指定すると、画面を縦と横の線で区切ったマス目のような構造を作れます。

例えるなら、ノートに引いた方眼紙の上に文字や写真を置く感覚です。どこに何を置くかが一目で分かり、ズレにくいのが特徴です。

CSS、グリッドレイアウト、display grid、レイアウト方法、初心者向けCSSといったキーワードは、 Web制作を始めると必ず目にします。

2. display: grid を指定する基本

グリッドレイアウトを使うには、まず親となる要素に display: grid を指定します。親とは、中に他の要素が入っている箱のようなものです。


<style>
.container {
    display: grid;
}
</style>

<div class="container">
    <div>箱1</div>
    <div>箱2</div>
    <div>箱3</div>
</div>

ブラウザ表示

この時点では、まだ縦に並ぶだけですが、グリッドの準備は整っています。

3. grid-template-columnsで横の並びを決める

grid-template-columns は、横方向のマスの数と幅を決める設定です。難しく聞こえますが、「横にいくつ並べるか」を決めるだけです。


<style>
.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
</style>

<div class="container">
    <div>箱1</div>
    <div>箱2</div>
    <div>箱3</div>
</div>

ブラウザ表示

fr は、残っている幅を均等に分ける単位です。ここでは横に三つ、同じ大きさの箱が並びます。

4. grid-template-rowsで縦の並びを考える

縦方向のマスを決めたい場合は、grid-template-rows を使います。これは縦に何段作るかを指定するものです。


<style>
.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 100px 100px;
}
</style>

<div class="container">
    <div>箱1</div>
    <div>箱2</div>
    <div>箱3</div>
    <div>箱4</div>
</div>

ブラウザ表示

このように、表のようなレイアウトを簡単に作れるのがCSSグリッドの強みです。

5. gapで箱と箱のすき間を調整する

グリッドでは、箱同士のすき間も簡単に調整できます。 gap は、マス目とマス目の間の距離を指定するプロパティです。


<style>
.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}
</style>

<div class="container">
    <div>箱1</div>
    <div>箱2</div>
    <div>箱3</div>
</div>

ブラウザ表示

余白を意識することで、読みやすく見やすいWebページになります。