高度な CSS チュートリアル -- グリッド レイアウト

01 グリッドレイアウト

モジュールは、行と列を含むグリッドベースのレイアウト システムを提供し、フロートや位置決めを使用せずに Web ページを簡単にデザインできるようにします。ほとんどのグリッド レイアウトは、1 つの親要素と 1 つ以上の子要素で構成されます。

02 グリッドコンテナがレイアウトを決定する

属性 を持つ、またはそのdisplay属性に設定された HTML 要素。グリッド コンテナーの直接の子はすべて、自動的にグリッド アイテムになります。gridinline-grid

グリッドは、列列、行行、ギャップ列ラップ、行ラップに分割されます。
その中で、ラップの利用可能な属性は次のとおりです。

• column-gap
• row-gap
• gap

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

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

グリッド レイアウトに 4 列を含める場合は、4 列の幅を指定するか、すべての列を同じ幅にする場合は「自動」を指定します。異なる幅が必要な場合は、コンクリートを使用できますwidth。

例:

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

親要素と子要素のネスト:

.grid-container {
    
    
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
    
    
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

03 中央 – グリッド コンテナー (親要素)

水平方向に中央揃え

justify-content注:プロパティを有効にして親要素の CSS に配置するには、グリッドの合計幅がコンテナの幅より小さくなければなりません。具体的な属性値は次のとおりです。

グリッド項目は独立しています:
space-evenly中央が中央、
space-aroundグリッド項目はすべて中央、
space-between左から左、右から右、中心から中心。
テキストと同様:
center: グリッド項目がすべて集中しており、テキストの集約と同等です。
start: グリッド項目が集中し、すべてが残ります。

垂直方向センタリング
align-contentプロパティはコンテナ内のグリッド全体を垂直方向に整列させるために使用され、具体的なプロパティ値は上記の通りで、使用方法は水平方向センタリングに対応します。

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

04 グリッド項目

列間の線は列線と呼ばれ、行間の線は行線と呼ばれます。

例: グリッド項目を列 1 に配置し、列 3 で終わるようにします。子要素のクラスに追加されます。

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

このgrid-area属性は grid-row-start、 、grid-column-start、grid-row-end およびgrid-column-endプロパティとして使用できます。

例: 「item8」を行 2、列 1 から開始し、2 行、3 列にわたるようにします。

.item8 {
    
    
  grid-area: 2 / 1 / span 2 / span 3;
}

grid-template-areasレイアウトの名前付けと構築に使用できます。

.item1 {
    
     grid-area: header; }
.item2 {
    
     grid-area: menu; }
.item3 {
    
     grid-area: main; }
.item4 {
    
     grid-area: right; }
.item5 {
    
     grid-area: footer; }

.grid-container {
    
    
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
}

回路図は以下の通りです：

05 その他の属性

以下は、グリッド レイアウトの共通の属性とその機能です。

属性	効果
グリッド テンプレートの列/グリッド テンプレートの行	列/行のサイズとグリッド コンテナの数を定義します。
グリッドテンプレートエリア	グリッドコンテナ内の領域のレイアウトを定義します。
グリッド行/グリッド列	グリッド項目の行/列の位置を指定します。
グリッド行の開始/グリッド行の終了/グリッド列の開始/グリッド列の終了	グリッド項目の開始と終了の行/列の位置を指定します。
グリッド列ギャップ/グリッド行ギャップ	グリッドの行/列間の間隔を定義します。
justify-items/align-items	行/列上のグリッド項目の配置を制御します。
コンテンツの位置揃え/コンテンツの整列	行/列上のグリッドの配置を制御します。グリッド コンテナーのサイズがグリッドのコンテンツより大きい場合に使用されます。
グリッド自動行/グリッド自動列	グリッド コンテナー内で明示的にサイズが設定されていない行/列のサイズを定義します。
グリッド自動フロー	グリッド コンテナー内に自動的に配置されるグリッド アイテムの方向と順序を定義します。
グリッドテンプレート	列/行のサイズとグリッド コンテナの数、およびグリッド領域のレイアウトを定義します。
グリッドエリア	グリッド項目のサイズと位置を指定し、グリッド テンプレート領域で使用する名前を項目に与えます。
注文	グリッド コンテナー内のグリッド項目の順序を定義します。
Zインデックス	スタック効果を使用して、グリッドのスタック順序におけるグリッド アイテムの順序を定義します。