CSSチュートリアル

CSSホーム CSSの紹介 CSS構文 CSSセレクター CSSハウツー CSSコメント CSSの色 CSSの背景 CSSボーダー CSSマージン CSSパディング CSSの高さ/幅 CSSボックスモデル CSSの概要 CSSテキスト CSSフォント CSSアイコン CSSリンク CSSリスト CSSテーブル CSSディスプレイ CSSの最大幅 CSSの位置 CSSZ-index CSSオーバーフロー CSSフロート CSSインラインブロック CSS整列 CSSコンビネータ CSS疑似クラス CSS疑似要素 CSSの不透明度 CSSナビゲーションバー CSSドロップダウン CSS画像ギャラリー CSS画像スプライト CSS AttrSelectors CSSフォーム CSSカウンター CSSWebサイトのレイアウト CSSユニット CSSの特異性 CSS!重要 CSS数学関数

CSS Advanced

CSSの丸みを帯びたコーナー CSSボーダー画像 CSSの背景 CSSの色 CSSカラーキーワード CSSグラデーション CSSシャドウ CSSテキスト効果 CSSWebフォント CSS2D変換 CSS3D変換 CSSトランジション CSSアニメーション CSSツールチップ CSSスタイルの画像 CSS画像反射 CSSオブジェクト適合 CSSオブジェクトの位置 CSSマスキング CSSボタン CSSページ付け CSSの複数の列 CSSユーザーインターフェイス CSS変数 CSSボックスのサイズ設定 CSSメディアクエリ CSSMQの例 CSSFlexbox

CSSレスポンシブ

RWDイントロ RWDビューポート RWDグリッドビュー RWDメディアクエリ RWD画像 RWDビデオ RWDフレームワーク RWDテンプレート

CSSグリッド

グリッドイントロ グリッドコンテナ グリッドアイテム

CSS SASS

SASSチュートリアル

CSSの

CSSテンプレート CSSの例 cssクイズ CSS演習 CSS証明書

CSSリファレンス

CSSリファレンス CSSセレクター CSS関数 CSSリファレンスオーラル CSSWebセーフフォント CSSアニメーション可能 CSSユニット CSSPX-EMコンバーター CSSの色 CSSの色の値 CSSのデフォルト値 CSSブラウザのサポート

CSSグリッドコンテナ


1

2

3

4

5

6

7

8


グリッドコンテナ

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

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


grid-template-columnsプロパティ

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

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

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

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;
}