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

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

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

幅: 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に設定することもできます。これは、「列が先、行が後」を意味します。

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

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  Vue3でアイコンを使用する2つの例

>>:  JVM 上の高性能データ形式ライブラリ パッケージである Apache Arrow の紹介とアーキテクチャ (Gkatziouras)

推薦する

Nginx で https をアップグレードする方法

購入証明書Alibaba CloudのCloud Shield証明書サービスから購入できます。証明書...

Dockerコンテナのインポ​​ートとエクスポートに関するチュートリアル

背景Docker の人気は、コンテナの共有と移植が容易であることと密接に関係しています。ユーザーは、...

Centos7 のインストールと Mysql5.7 の設定

ステップ1: MySQL YUMソースを取得するMySQLの公式サイトにアクセスして、RPMパッケー...

MySQLデータベースの使用仕様の概要

導入: MySQL データベースの仕様に関しては、皆さんも何らかのドキュメントを読んだことがあると思...

HTML における br と br/ の違い

スタックフローからの回答:単に<br>だけで十分です。その他の形式は、XHTML との互...

Docker を使用してイメージをローカルにパッケージ化してデプロイする方法

初めてDockerを使用してイメージをローカルにパッケージ化してデプロイするまず、私のラップトップシ...

Zabbix動的実行監視収集スクリプトの実装原理

Zabbix カスタム スクリプトを使用して監視データを収集する場合、通常、次の問題が発生します。サ...

Vue3+Vite+TS は、要素プラスビジネスコンポーネントの二次カプセル化を実装します sfasga

目次1. 構造文字列2. タプルを返す3. Dict辞書にアクセスする4. 図書館を利用する5. リ...

Vue が価格カレンダー効果を実現

この記事では、価格カレンダー効果を実現するためのVueの具体的なコードを例として紹介します。具体的な...

シンプルな商品スクリーニング機能を実現するjs

この記事の例では、商品スクリーニング機能を実装するためのjsの具体的なコードを参考までに共有していま...

React のグローバル状態管理の 3 つの基本メカニズムの調査

目次序文小道具コンテクスト州要約する序文最新のフロントエンド フレームワークはすべて、コンポーネント...

MySQL共通インデックスとユニークインデックスの詳細な説明

シナリオ1. ID番号のフィールドを備えた市民システムを維持する2. ビジネス コードでは、重複する...

HTML チュートリアル: 画像のサイズ、配置、間隔、境界線の属性を変更する方法

画像タグ: <img> ページに画像を挿入するには、「src」属性を持つ「img」タグを...

MySQL (5.6 以下) の JSON 解析の詳細な例

MySQL(5.6以下)はjsonを解析します #json 解析関数 DELIMITER $$ `j...

MySQLでの少し複雑な使用例コード

序文MySQL の構文は誰にとっても難しいものではないと思いますが、この記事では主に MySQL の...