CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのgrid-templateプロパティの使い方を徹底解説！行・列・エリアの一括設定方法

grid-templateプロパティとは

CSSのgrid-templateプロパティは、グリッドレイアウトにおける行数・列数・各エリア（領域）をまとめて指定できるショートハンドプロパティです。個別にgrid-template-rowsやgrid-template-columnsを設定する代わりに、このプロパティひとつでグリッド構造全体を簡潔に定義できます。

グリッドテンプレートを設定する際は、行と列の数を指定し、あわせてグリッドレイアウト内のエリアも定義します。

grid-templateの構文

grid-templateプロパティの書式は以下のとおりです。

grid-template: none | grid-template-rows / grid-template-columns | grid-template-areas | initial | inherit;

各値の意味は次の通りです。

  • none … グリッドを定義しません（デフォルト値）
  • grid-template-rows / grid-template-columns … 行と列のサイズを「/」で区切って指定します
  • grid-template-areas … エリア名を使ってレイアウトを定義します
  • initial … 初期値に戻します
  • inherit … 親要素の値を継承します

grid-templateの使用例

それでは、実際のコード例を見てみましょう。以下のサンプルでは、1行100pxの高さで、幅が自動調整される3列のグリッドを作成しています。

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
    display: grid;
    grid-template: 100px / auto auto auto;
    grid-gap: 5px;
    background-color: blue;
    padding: 5px;
}
.grid-container > div {
    background-color: orange;
    text-align: center;
    padding: 5px 0;
    font-size: 30px;
}
</style>
</head>
<body>
<h1>見出し</h1>
<p>ランダムな数値を表示します</p>
<div class="grid-container">
<div class="item1">250</div>
<div class="item2">120</div>
<div class="item3">333</div>
<div class="item4">298</div>
<div class="item5">645</div>
<div class="item6">543</div>
<div class="item7">555</div>
<div class="item8">723</div>
<div class="item9">811</div>
</div>
</body>
</html>

コードのポイント解説

  • display: grid; … コンテナをグリッドレイアウトとして宣言します
  • grid-template: 100px / auto auto auto; … 行の高さを100pxに固定し、3つの列を自動幅（auto）で配置します
  • grid-gap: 5px; … 各アイテム間に5pxの間隔を設けます

このようにgrid-templateを使えば、行と列の定義を1行で完結でき、コードの可読性が向上します。複雑なレイアウトを作る場合でも、ショートハンドを活用することでCSSをすっきりと記述できます。

出力結果

上記のコードをブラウザで表示すると、青色の背景を持つグリッドコンテナの中に、オレンジ色のセルが3列×3行で整然と並びます。各セルには指定した数値が中央揃えで表示されます。

CSSのgrid-templateプロパティの使い方を徹底解説！行・列・エリアの一括設定方法

  1. CSSのマージン短縮プロパティ（shorthand）の使い方｜基本構文と実例コードを解説

    CSSのマージン短縮プロパティとは？CSSのマージン短縮プロパティ（margin shorthand）は、要素の外側の余白（マージン領域）をまとめて定義するためのプロパティです。margin-top、margin-right、margin-bottom、margin-leftを個別に指定する代わりに、1つのmarginプロパティだけで一括設定できます。値は時計回りの順序で適用されます。つまり、「上（margin-top）→ 右（margin-right）→ 下（margin-bottom）→ 左（margin-left）」の順です。構文CSSのmarginプロパティの基本構文は以下のとおりです

  2. CSSのborder-styleプロパティの使い方！スタイル一覧とサンプルコード

    CSSのborder-styleプロパティは、要素の枠線（ボーダー）の見た目を指定するためのプロパティです。実線・破線・点線など、さまざまなスタイルの枠線を簡単に描画できます。 また、border-top-style（上）、border-right-style（右）、border-bottom-style（下）、border-left-style（左）という個別のプロパティを使えば、各辺ごとに異なるスタイルを設定することも可能です。 border-styleで指定できる主な値 none / hidden … 枠線を表示しない solid … 1本の実線 double … 2本の二重線 da