CSSグリッドレイアウト入門！grid-template-columns・rowsの基本と書き方を初心者向けに解説

1. grid-template-columnsとrowsとは何か

1. grid-template-columnsとrowsとは何か

CSSグリッドレイアウトでは、画面を縦と横に区切って配置を考えます。 そのときに使うのが grid-template-columns と grid-template-rows です。

columns は横方向、rows は縦方向の区切りを決めるための設定です。 ノートに縦線と横線を引いて、マス目を作る感覚と同じです。

CSS、グリッドレイアウト、grid-template-columns、grid-template-rows、初心者向けCSSといった言葉は、 Web制作の基本としてよく検索されます。

2. grid-template-columnsの基本的な書き方

2. grid-template-columnsの基本的な書き方

grid-template-columns は、横にいくつの列を作るかを指定します。 数字や単位をスペースで区切って書くのが特徴です。

<style>
.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
}
</style>

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

この例では、横に三つの箱が同じ幅で並びます。 px はピクセルという単位で、画面上の長さを表します。

3. frを使った柔軟な横幅指定

3. frを使った柔軟な横幅指定

fr は、残っているスペースを分け合うための単位です。 難しく考えず、割合のようなものだと覚えてください。

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

<div class="container">
    <div>左</div>
    <div>右</div>
</div>

右の箱が左の二倍の幅になります。 画面サイズが変わっても、自動で調整されるのが便利な点です。

4. grid-template-rowsで縦方向を決める

4. grid-template-rowsで縦方向を決める

grid-template-rows は、縦にどのくらいの高さで区切るかを決めます。 横と同じ考え方なので、セットで覚えると理解しやすくなります。

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

<div class="container">
    <div>上左</div>
    <div>上右</div>
    <div>下左</div>
    <div>下右</div>
</div>

表や一覧のようなレイアウトを作るときに、とても役立ちます。

5. マス目で考えると理解しやすい理由

5. マス目で考えると理解しやすい理由

初心者がCSSグリッドでつまずきやすい理由は、頭の中で想像しにくいからです。 ですが、紙にマス目を書いて考えると一気に分かりやすくなります。

横線が grid-template-rows、縦線が grid-template-columns だと思ってください。 そこに箱を順番に置いていくイメージです。

CSSグリッドレイアウトは、ページ全体の構造を整理するための強い味方です。 初心者でも、配置の考え方を身につけやすいのが大きな魅力です。

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

CSSグリッドレイアウトとは何ですか？初心者でも理解できる基本を知りたいです

CSSグリッドレイアウトとは、Web制作で使われるレイアウト手法の一つで、画面を縦と横に区切って配置する方法です。初心者向けCSSの中でも特に重要で、grid-template-columnsやgrid-template-rowsを使って直感的にレイアウトを設計できます。