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

CSSのgridプロパティの使い方を徹底解説！グリッドレイアウトを一括設定する方法

CSSのgridプロパティは、グリッドレイアウトに関する複数のプロパティを一括で指定できるショートハンド（省略形）です。この1つのプロパティを使うことで、以下の6つの個別プロパティをまとめて設定できます。

  • grid-template-rows：行のサイズを定義
  • grid-template-columns：列のサイズを定義
  • grid-template-areas：名前付きエリアでレイアウトを定義
  • grid-auto-rows：自動生成される行のサイズを指定
  • grid-auto-columns：自動生成される列のサイズを指定
  • grid-auto-flow：アイテムの自動配置の流れを制御

これらを個別に書く必要がなくなるため、コードがすっきりし、メンテナンス性も向上します。

gridプロパティの基本的な書き方

gridプロパティは「行の高さ / 列の幅」の形式で値を指定します。例えば grid: 100px / auto auto; と書けば、「行の高さを100px、列の幅をauto（内容に応じて自動調整）で2列」という意味になります。

実装例

以下のコードを実行すると、CSSのgridプロパティを使ったグリッドレイアウトの動作を確認できます。赤色のコンテナの中に、黄色い要素が2列のグリッド状に配置されます。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: grid;
        grid: 100px / auto auto;
        grid-gap: 10px;
        background-color: red;
        padding: 10px;
      }
      .container>div {
        background-color: yellow;
        text-align: center;
        padding: 10px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="ele1">1</div>
      <div class="ele2">2</div>
      <div class="ele3">3</div>
      <div class="ele4">4</div>
      <div class="ele5">5</div>
      <div class="ele6">6</div>
    </div>
  </body>
</html>

コードのポイント解説

  • display: grid; … コンテナをグリッドコンテナとして宣言します。これがないとgrid関連のプロパティは機能しません。
  • grid: 100px / auto auto; … 行の高さを100pxに固定し、幅が自動調整される2列のグリッドを作成します。
  • grid-gap: 10px; … グリッドアイテム同士の間隔を10px空けます。現在は gap プロパティへの移行が推奨されています。

要素が6つあるため、2列×3行のグリッドとして表示されます。行の高さは最初の行のみ100pxで明示的に指定されていますが、残りの行はgrid-auto-rowsの初期値（auto）に従って自動的に決まります。

まとめ

gridプロパティを活用すれば、グリッドレイアウトの設定を簡潔に記述できます。まずはシンプルな例から試して、行・列の指定方法や自動配置の挙動に慣れていくのがおすすめです。より複雑なレイアウトが必要になった場合は、grid-template-areas を使った名前付きエリアによる直感的なレイアウト設計にも挑戦してみましょう。

  1. CSSのgrid-auto-columnsプロパティの使い方を徹底解説

    CSSのgrid-auto-columnsプロパティは、グリッドレイアウトにおいて明示的にサイズが指定されていない列(暗黙的なトラック)に対して、デフォルトの幅を設定するためのプロパティです。通常、grid-template-columnsで明示的に定義された列以外にアイテムが配置された場合、その列のサイズは自動的に決まります。このときgrid-auto-columnsを指定しておけば、暗黙的に生成されるすべての列に統一した幅を適用できます。grid-auto-columnsの基本的な書き方以下のように、グリッドコンテナに対して指定します。.container { display: gri

  2. CSSグリッドのgrid-auto-flowプロパティの使い方と実装例

    CSSグリッドレイアウトにおいて、grid-auto-flowプロパティは、明示的に位置が指定されていないアイテム（自動配置アイテム）をグリッド内にどのように流し込むかを制御するための重要なプロパティです。 grid-auto-flowプロパティとは 通常、グリッドアイテムは行方向（左から右へ）に自動的に配置されます。しかし、grid-auto-flowプロパティを使うことで、この配置の流れる方向を変更したり、隙間を詰めて効率的に配置したりすることが可能になります。 主な値は以下の通りです。 row（初期値）：アイテムを各行に順番に配置し、必要に応じて新しい行を追加します。 column：ア