グリッド共通レイアウトの実装

両側に隙間なし、各列間に隙間あり

幅: 100%;  
表示: グリッド;  
グリッドテンプレート列: repeat(4,1fr);  
項目の位置揃え: 伸縮;  
グリッドギャップ: 1px;

プロパティの紹介: justify-itemsプロパティはセルコンテンツの水平位置 (左、中央、右) を設定し、 align-itemsプロパティはセルコンテンツの垂直位置 (上、中央、下) を設定します。

start: セルの開始端を揃えます。
end: セルの終了端に揃えます。
center: セルは中央に配置されます。
Stretch: セルの幅全体を埋めるように伸縮します (デフォルト値)。

プロパティの概要: コンテナーでグリッドレイアウトを指定した後、行と列に分割する必要があります。 grid-template-columnsプロパティは各列の幅を定義し、 grid-template-rowsプロパティは各行の高さを定義します。 repeat(4,1fr)は繰り返しを意味します。最初のパラメータは回数を示します。ここでは 4 つの列があり、4 回を意味します。1rf は部分の概念を意味します。repeat(4,1fr) は 4 つの部分に均等に分割されることを意味します。

効果は以下のとおりです。

行と列の間隔は同じで、縦方向が優先されます。

.スワイパースライドインナー{  
    幅: 100%;  
    表示: グリッド;  
    /*まずは縦方向の配置*/  
    グリッド自動フロー: 列;  
    /* 3つの列に分け、平均スコアを算出*/  
    /*グリッドテンプレート列: repeat(3, 1fr);*/  
    グリッドテンプレートの列: 1fr 1fr 1fr;  
    /* 2行に分割し、均等に分配します*/  
    /*グリッドテンプレート行: repeat(2, 1fr);*/  
    グリッドテンプレートの行: 1fr 1fr;  
    グリッド行間隔: 10px;  
    グリッド列の間隔: 10px;  
    .カードアイテム{  
        ディスプレイ: フレックス;  
        flex-wrap: ラップ;  
        幅: 230ピクセル;  
        高さ: 230px;
    }
}

プロパティの紹介: グリッドを分割した後、コンテナーのサブ要素が各グリッドに順番に自動的に配置されます。デフォルトの配置順序は「行が先、列が後」です。つまり、最初に 1 行目を埋めてから 2 行目の配置を開始します。これは、下の図の数字の順序です。この順序はgrid-auto-flowプロパティによって決定され、デフォルト値はrowです。これは「最初に行、次に列」を意味します。これをcolumnに設定することもできます。これは、「列が先、行が後」を意味します。

効果は以下のとおりです。