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

grid-template-columns・rows の基本と書き方

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

生徒

「CSSのグリッドで、横や縦の並びを決める書き方がよく分かりません…」

先生

「それは grid-template-columns と grid-template-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の基本的な書き方

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を使った柔軟な横幅指定

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


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

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

ブラウザ表示

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

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>

ブラウザ表示

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