TECH I.S.

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に設定されている場合、グリッドコンテナーになります。

.grid-container {
  display: grid;
}
自分で試してみる »

.grid-container {
  display : inline-grid;
}

自分で試してみる »

グリッドコンテナーの直接の子はすべて、自動的に*グリッドアイテム*になります。


グリッド列

グリッド項目の垂直線は*列*と呼ばれます。
***

グリッド行

グリッド項目の水平線は*行*と呼ばれます。
***

グリッドギャップ

各列/行の間のスペースは*ギャップ*と呼ばれます。

次のいずれかのプロパティを使用してギャップサイズを調整できます。

  • column-gap
  • row-gap
  • gap

column-gapプロパティは、列間のギャップを設定します。
.grid-container {
  display: grid;
  column-gap: 50px;
}

自分で試してみる »

row-gapプロパティは、行間のギャップを設定します。
.grid-container {
  display : grid;
  row-gap: 50px;
}

自分で試してみる »

gapプロパティは、row-gapプロパティとcolumn-gapプロパティの短縮形プロパティです。
.grid-container {
  display: grid;
  gap: 50px 100px;

}

自分で試してみる »

gapプロパティを使用して、row-gapとcolumn-gapの両方を1つの値で設定することもできます。
.grid-container {
  display: grid;
  gap: 50px;

}

自分で試してみる »


グリッド線

列間の線は*カラムライン*と呼ばれます。

行間の線は*ローライン*と呼ばれます。

グリッドアイテムをグリッドコンテナに配置するときは、行番号を参照してください。

グリッドアイテムを列1に配置し、列3で終了させます。

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

自分で試してみる »

グリッドアイテムを行1に配置し、行3で終了させます。

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

自分で試してみる »


すべての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 グリッド行間のギャップを指定します


プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細