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

CSS Gridのgrid-template-rowsで行の高さを定義する方法

grid-template-rowsプロパティとは

CSSグリッドレイアウトでは、grid-template-rowsプロパティを使用して、グリッドコンテナ内の各行の高さを定義できます。スペース区切りで複数の値を指定すると、上から順に行の高さが決まり、指定した値の数がそのままグリッドの行数になります。

高さの指定には、pxなどの絶対単位のほか、fr（利用可能なスペースの比率）、auto、min-content、max-contentなども利用できます。

サンプルコード

以下のコードを実行すると、120px・90px・100pxの高さを持つ3行のグリッドが作成されます。6つの要素は、grid-template-rowsの設定に従って各行に自動的に配置されます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         .container {
            display: grid;
            background-color: gray;
            grid-template-rows: 120px 90px 100px;
            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>

ポイント

  • grid-template-rowsに指定した値の数が、グリッドの行数になります。
  • 要素の数が行数を超える場合、暗黙の行（implicit row）が自動的に追加されます。
  • grid-gapプロパティを使うと、行と列の間隔をまとめて設定できます。

  1. CSSでグリッドアイテムに名前を設定する方法（grid-areaの使い方）

    CSSでグリッドアイテムに名前を設定するには、grid-areaプロパティを使用し、grid-template-areasプロパティと組み合わせます。まず親要素（グリッドコンテナ）側でgrid-template-areasを使ってレイアウト上の領域に名前を定義し、次に子要素（グリッドアイテム）側でgrid-areaにその名前を指定することで、任意のアイテムを特定の領域へ自由に配置できます。 サンプルコード <!DOCTYPE html> <html> <head> <style> .container { display: grid;

  2. CSSでフレックスラインをコンテナの先頭に表示する方法(align-content: flex-start)

    CSSのalign-contentプロパティにflex-startという値を指定すると、フレックスコンテナ内の複数のフレックスライン(行)をコンテナの先頭側に寄せて配置できます。 align-content: flex-startの基本 align-contentプロパティは、交差軸(cross axis)方向におけるフレックスライン全体の配置を制御するプロパティです。flex-startを指定すると、すべてのフレックスラインが交差軸の開始位置、つまりコンテナの先頭にまとめられて表示されます。 注意点として、align-contentが機能するのはflex-wrap: wrap;などで折り