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

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

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

基本的な使い方

例えば、grid-template-columns: auto auto;と指定すると、2列のグリッドが作成されます。autoを指定した列は、コンテンツのサイズに応じて幅が自動的に調整されます。

サンプルコード

以下は、grid-template-columnsプロパティを使って2列のグリッドレイアウトを作成する例です。さらに、最初の要素（ele1）にgrid-row-startとgrid-row-endを指定することで、複数行にまたがる配置も実現しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         .container {
            display: grid;
            background-color: green;
            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;
         }
         .ele1 {
            grid-row-start: 1;
            grid-row-end: 6;
         }
      </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に設定します。
  • grid-row-start / grid-row-end; — 要素1を1行目から6行目まで縦方向にまたがって配置します。

このようにgrid-template-columnsを活用すれば、柔軟で整然としたグリッドレイアウトを簡単に構築できます。列幅にはpxや%、frなどの単位も使えるため、レスポンシブデザインへの対応も容易になります。

  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 {