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

CSSグリッドコンテナとは？役割と基本的な使い方を解説

CSSグリッドコンテナとは

CSSにおけるグリッドコンテナ（Grid Container）は、内部に「グリッドアイテム」と呼ばれる子要素を持つコンテナです。display: grid; を指定することで、その要素はグリッドコンテナとして振る舞い、直下の子要素が自動的にグリッドアイテムになります。

グリッドアイテムは、行（row）と列（column）で構成される格子状のレイアウトの中に配置されます。この仕組みにより、従来のfloatやflexboxでは実現しにくかった複雑な2次元レイアウトも、直感的かつ柔軟に構築できます。

グリッドコンテナの作成と列数の設定

それでは、実際にCSSグリッドコンテナを作成し、グリッドの列数を設定する方法を見ていきましょう。

例

<!DOCTYPE html>
<html>
   <head>
      <style>
         .container {
            display: grid;
            background-color: blue;
            grid-template-columns: auto auto;
            padding: 20px;
            grid-gap: 20px;
         }
         .container > div {
            background-color: orange;
            border: 2px solid gray;
            padding: 35px;
            font-size: 30px;
            text-align: center;
         }
      </style>
   </head>
   <body>
      <h1>Game Board</h1>
      <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-template-columns: auto auto; — 自動幅の列を2つ作成します。値を追加すれば、列数を自由に増やすことができます。
  • grid-gap: 20px; — グリッドアイテム同士の間隔を20pxに設定します。なお、現在は後継となる gap プロパティの使用が推奨されています。
  • padding: 20px; — コンテナ内側の余白を確保し、アイテムとの距離を調整します。

この例では、6つの <div> 要素（1〜6）がグリッドアイテムとして扱われ、2列×3行のグリッドに自動的に配置されます。列数は grid-template-columns の値の数で決まるため、レイアウトの変更も非常に簡単です。

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

    CSSのgridプロパティは、グリッドレイアウトに関する複数のプロパティを一括で指定できるショートハンド（省略形）です。この1つのプロパティを使うことで、以下の6つの個別プロパティをまとめて設定できます。 grid-template-rows：行のサイズを定義 grid-template-columns：列のサイズを定義 grid-template-areas：名前付きエリアでレイアウトを定義 grid-auto-rows：自動生成される行のサイズを指定 grid-auto-columns：自動生成される列のサイズを指定 grid-auto-flow：アイテムの自動配置の流れを制御 これら

  2. CSSのgrid-areaプロパティとは？グリッドエリアを一括指定する方法と実装例

    grid-areaプロパティとは CSSのgrid-areaプロパティは、グリッドレイアウトにおけるアイテムの配置範囲をまとめて指定できるショートハンド（一括指定）プロパティです。この1つのプロパティを使うだけで、以下の4つの個別プロパティを同時に設定できます。 grid-row-start … 行方向の開始位置 grid-column-start … 列方向の開始位置 grid-row-end … 行方向の終了位置 grid-column-end … 列方向の終了位置 基本構文 grid-area: row-start / column-start / row-end / column-