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

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

CSSグリッドレイアウトでは、grid-template-columnsプロパティを使用することで、各列の幅を自由に定義できます。

値をスペース区切りで複数指定すると、左から順に各列の幅が適用されます。px（ピクセル）などの絶対単位のほか、%（パーセント）やfr（フレーム単位）といった柔軟な単位も利用可能です。

サンプルコード

以下のコードを実行して、実際の動作を確認してみましょう。

<!DOCTYPE html>
<html>
   <head>
      <style>
         .container {
            display: grid;
            background-color: gray;
            grid-template-columns: 120px 80px 50px;
            padding: 20px;
            grid-gap: 20px;
         }
         .container > div {
            background-color: yellow;
            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: 120px 80px 50px;を指定することで、1列目：120px／2列目：80px／3列目：50pxという幅を持つ3列のグリッドを生成しています。

6つの子要素は、3列×2行の形で自動的に配置されます。また、grid-gap: 20px;により、各セル間に20pxの余白が設けられます。

補足：柔軟な幅指定のテクニック

  • fr単位：grid-template-columns: 1fr 2fr 1fr;のように指定すると、利用可能な空間を比率に応じて分配できます。
  • repeat()関数：grid-template-columns: repeat(3, 100px);と書けば、同じ幅の列をまとめて定義でき、コードがすっきりします。
  • minmax()関数：minmax(100px, 1fr)のように使うことで、最小値と最大値の範囲を持つレスポンシブ対応の列を簡単に作成できます。
  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 {