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

CSSのgrid-rowプロパティとは？グリッドアイテムの行サイズを指定する方法

CSSのgrid-rowプロパティは、グリッドレイアウト内のアイテムが占める行の範囲（サイズ）を指定するためのプロパティです。このプロパティは、開始位置を指定するgrid-row-startと、終了位置を指定するgrid-row-endという2つの個別プロパティをまとめて扱えるショートハンド（一括指定）プロパティです。

grid-rowプロパティの基本構文

grid-rowプロパティは、スラッシュ（/）で区切って「開始ライン / 終了ライン」の形式で値を記述します。

.element {
  grid-row: 開始ライン / 終了ライン;
}

例えば grid-row: 1 / 6; と指定すると、そのアイテムは1行目から6行目までの範囲にまたがって配置されます。

実装例：grid-rowでアイテムを複数行にまたがらせる

以下のコードでは、6つの要素を持つグリッドコンテナを作成し、最初の要素（ele1）に対して grid-row: 1 / 6; を適用しています。これにより、1番目の要素は縦方向に5行分のスペースを占有します。

<!DOCTYPE html>
<html>
   <head>
      <style>
         .container {
            display: grid;
            background-color: green;
            grid-template-columns: auto auto;
            padding: 20px;
            grid-gap: 10px;
         }
         .container > div {
            background-color: orange;
            text-align: center;
            padding: 10px 0;
            font-size: 20px;
         }
         .ele1 {
            grid-row: 1 / 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>

コードのポイント解説

  • .container：display: grid; を指定してグリッドコンテナを定義し、grid-template-columns: auto auto; で2列のレイアウトを作成しています。grid-gap: 10px; により、各アイテム間に10pxの余白が設けられます。
  • .container > div：グリッド内のすべての子要素に対して、背景色・中央揃え・パディングなどの共通スタイルを適用しています。
  • .ele1：grid-row: 1 / 6; を指定することで、1番目の要素が1行目から6行目まで縦にまたがって表示されます。

このコードを実行すると、緑色の背景のグリッド領域の中にオレンジ色のブロックが並び、1番目の要素だけが縦長に伸びた状態で表示されます。grid-rowプロパティを使いこなすことで、複雑なグリッドレイアウトも柔軟に構築できるようになります。

  1. CSSのcursorプロパティ完全ガイド：マウスカーソルの種類を自由に指定する方法

    CSSの cursor プロパティを使用すると、要素にマウスを重ねたときに表示されるカーソル（ポインタ）の種類を指定できます。リンクやボタン、ドラッグ可能な領域など、要素の役割に応じて適切なカーソルを設定することで、ユーザーにとって直感的で分かりやすいインターフェースを実現できます。 基本的な使い方 cursorプロパティは、CSSの他のプロパティと同様に、セレクタに対して値を指定するだけで使用できます。インラインスタイルでも外部スタイルシートでも記述可能です。 <html> <head> </head> <body>

  2. CSSのword-breakプロパティとは？使い方とサンプルコードを解説

    word-breakプロパティは、CSSでテキストの改行（行の折り返し）ルールを制御するためのプロパティです。特に、単語の途中で改行するかどうか、ハイフンや句読点でのみ改行するかどうかなどを指定できます。 word-breakプロパティの主な値 normal：通常の改行ルールに従います（初期値）。日本語や中国語などのCJK文字では任意の位置で改行できますが、欧文の単語途中では改行されません。 break-all：すべての文字の間で改行が可能になります。単語の途中でも強制的に折り返されるため、幅の狭いコンテナに長い英単語を収めたい場合に便利です。 keep-all：CJK言語（日本語・中国語・