CSS グリッドレイアウトモジュール
ヘッダー
メニュー
メイン
右
フッター
グリッドレイアウト
CSSグリッドレイアウトモジュールは、行と列を含むグリッドベースのレイアウトシステムを提供し、フロートや配置を使用せずにWebページを簡単にデザインできるようにします。
ブラウザのサポート
グリッドプロパティは、最新のすべてのブラウザーでサポートされています。
| 57.0 | 16.0 | 52.0 | 10 | 44 |
グリッド要素
グリッドレイアウトは、1つ以上の子要素を持つ親要素で構成されます。
例
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
1
2
3
4
5
6
7
8
9
displayプロパティ
HTML要素は、displayプロパティがgridまたはinline-gridに設定されている場合、グリッドコンテナーになります。
グリッドコンテナーの直接の子はすべて、自動的に*グリッドアイテム*になります。
グリッド列
グリッド項目の垂直線は*列*と呼ばれます。
***
グリッド行
グリッド項目の水平線は*行*と呼ばれます。
***
グリッドギャップ
各列/行の間のスペースは*ギャップ*と呼ばれます。
次のいずれかのプロパティを使用してギャップサイズを調整できます。
column-gaprow-gapgap
例
gapプロパティは、row-gapプロパティとcolumn-gapプロパティの短縮形プロパティです。
.grid-container { display: grid; gap: 50px 100px; }
例
gapプロパティを使用して、row-gapとcolumn-gapの両方を1つの値で設定することもできます。
.grid-container { display: grid; gap: 50px; }
グリッド線
列間の線は*カラムライン*と呼ばれます。
行間の線は*ローライン*と呼ばれます。
グリッドアイテムをグリッドコンテナに配置するときは、行番号を参照してください。
すべてのCSSグリッドプロパティ
|
プロパティ |
説明 |
|---|---|
| column-gap | 柱間のギャップを指定します |
| gap | row-gapプロパティとcolumns-gapプロパティの短縮形プロパティ |
| grid | grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、および grid-auto-flowプロパティの短縮形プロパティ。 |
| grid-area | グリッドアイテムの名前を指定するか、このプロパティは、grid-row-start、grid-column-start、grid-row-end、およびgrid-column-endプロパティの短縮プロパティです。 |
| grid-auto-columns | デフォルトの列サイズを指定します |
| grid-auto-flow | 自動配置アイテムをグリッドに挿入する方法を指定します |
| grid-auto-rows | デフォルトの行サイズを指定します |
| grid-column | grid-column-startプロパティとgrid-column-endプロパティの短縮形プロパティ |
| grid-column-end | グリッドアイテムの終了位置を指定します |
| grid-column-gap | 列間のギャップのサイズを指定します |
| grid-column-start | グリッドアイテムの開始位置を指定します |
| grid-gap | grid-Row-gapプロパティとgrid-column-gapプロパティの短縮形プロパティ |
| grid-row | grid-row-startプロパティとgrid-row-endプロパティの短縮形プロパティ |
| grid-row-end | グリッドアイテムの終了位置を指定します |
| grid-row-gap | 行間のギャップのサイズを指定します |
| grid-row-start | グリッドアイテムの開始位置を指定します |
| grid-template | grid-template-rows、grid-template-columns、およびgrid-areasプロパティの短縮形プロパティ |
| grid-template-areas | 名前付きグリッドアイテムを使用して、列と行を表示する方法を指定します |
| grid-template-columns | 列のサイズ、およびグリッドレイアウト内の列数を指定します |
| grid-template-rows | グリッドレイアウトの行のサイズを指定します |
| row-gap | グリッド行間のギャップを指定します |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。