TECH I.S.

CSS グリッド コンテナ


1

2

3

4

5

6

7

8

自分で試してみる »

グリッドコンテナ

HTML要素をグリッドコンテナとして動作させるには、displayプロパティをgridまたはinline-gridに設定する必要があります。

グリッドコンテナは、列と行の中に配置されたグリッドアイテムで構成されます。


grid-template-columnsプロパティ

grid-template-columnsプロパティは、グリッドレイアウトの列数を定義し、各列の幅を定義できます。

値はスペースで区切られたリストで、各値はそれぞれの列の幅を定義します。

グリッドレイアウトに4列を含める場合は、4列の幅を指定するか、すべての列を同じ幅にする場合は「auto」を指定します。

4つの列を持つグリッドを作成します。

.grid-container {   display: grid;   grid-template-columns: auto auto auto auto; }

自分で試してみる »

ノート:4列のグリッドに4つ以上のアイテムがある場合、グリッドはアイテムを配置する新しい行を自動的に追加します。

grid-template-columnsプロパティを使用して、列のサイズ(幅)を指定することもできます。

4つの列のサイズを設定します。

.grid-container {   display: grid;   grid-template-columns: 80px 200px auto 40px; }

自分で試してみる »


grid-template-rowsプロパティ

grid-template-rowsプロパティは、各行の高さを定義します。

1

2

3

4

5

6

7

8

値はスペースで区切られたリストで、各値はそれぞれの行の高さを定義します:

.grid-container {   display: grid;   grid-template-rows: 80px 200px; }

自分で試してみる »


justify-contentプロパティ

justify-contentプロパティは、コンテナー内のグリッド全体を整列するために使用されます。

1

2

3

4

5

6

ノート:justify-contentプロパティが効果を発揮するには、グリッドの合計幅がコンテナの幅より小さくなければなりません。

.grid-container {   display: grid;   justify-content: space-evenly; }

自分で試してみる »

.grid-container {   display: grid;   justify-content: space-around; }

自分で試してみる »

.grid-container {   display: grid;   justify-content: space-between; }

自分で試してみる »

.grid-container {   display: grid;   justify-content: center; }

自分で試してみる »

.grid-container {   display: grid;   justify-content: start; }

自分で試してみる »

.grid-container {   display: grid;   justify-content: end; }

自分で試してみる »


align-content プロパティ

align-contentプロパティは、コンテナ内のグリッド全体を垂直方向に整列させるために使用されます。

1

2

3

4

5

6

ノート:align-contentプロパティが効果を発揮するには、グリッドの合計の高さがコンテナの高さよりも小さくなければなりません。

.grid-container {   display: grid;   height: 400px;   align-content: center; }

自分で試してみる »

.grid-container {   display: grid;   height: 400px;   align-content: space-evenly; }

自分で試してみる »

.grid-container {   display: grid;   height: 400px;   align-content: space-around; }

自分で試してみる »

.grid-container {   display: grid;   height: 400px;   align-content: space-between; }

自分で試してみる »

.grid-container {   display: grid;   height: 400px;   align-content: start; }

自分で試してみる »

.grid-container {   display: grid;   height: 400px;   align-content: end; }

自分で試してみる »



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

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

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

スクールの詳細