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

CSSグリッドレイアウトで列数を定義する方法｜grid-template-columnsの使い方

CSSグリッドレイアウトで列数を定義する方法

CSSグリッドレイアウトで列数を定義するには、grid-template-columns プロパティを使用します。このプロパティに値をスペース区切りで指定すると、指定した数だけ列が生成されます。

各列の幅は auto のほか、px・%・fr などの単位でも指定できます。例えば、値を3つ並べれば3列のグリッドになります。

サンプルコード

以下のコードでは、3列のグリッドを設定しています。ブラウザで実行して、実際の表示を確認してみてください。

<!DOCTYPE html>
<html>
   <head>
      <style>
         .container {
            display: grid;
            background-color: yellow;
            grid-template-columns: auto auto auto;
            padding: 20px;
            grid-gap: 20px;
         }
         .container > div {
            background-color: blue;
            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 auto; … 自動幅（auto）の列を3つ作成し、3列のグリッドを構成します。
  • grid-gap: 20px; … グリッドアイテム同士の間隔を20pxに設定します。

補足：repeat() 関数を使った簡潔な書き方

同じ幅の列を繰り返す場合は、repeat() 関数を使うとより簡潔に記述できます。

/* 上記の「auto auto auto」と同じ意味 */
grid-template-columns: repeat(3, auto);

列数が多い場合やレスポンシブ対応を行う場合にも便利なので、覚えておくとよいでしょう。

  1. 【CSS】Flexboxで作る高度なレイアウト！基本プロパティと実装サンプルを解説

    Flexbox（フレックスボックス）とは？ CSS3には「Flexible Box Layout（フレキシブルボックスレイアウト）」と呼ばれるレイアウトモードが用意されており、一般的にはFlexbox（フレックスボックス）として知られています。Flexboxを活用することで、従来のfloatやpositionを使った手法よりもはるかに簡単かつ柔軟に、複雑なWebアプリケーションやWebページのレイアウトを構築できます。 Flexboxは「フレックスコンテナ」（親要素）と「フレックスアイテム」（子要素）という2つの概念で構成されます。親要素にdisplay: flex;を指定するだけで、その直下

  2. CSSで4列のレイアウトグリッドを作成する方法

    CSSで4列のレイアウトグリッドを作成するには、各カラムとなる要素に float: left; を指定し、幅を 25% に設定するのが基本的な手法です。これにより、4つの要素が横一列に均等に並びます。以下に具体的なコード例を示します。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body {