CSSでnグリッドレイアウトを実装する方法

CSSでnグリッドレイアウトを実装する方法

一般的なアプリケーションシナリオ

現在のアプリのインターフェースは基本的に同じであり、グリッドレイアウトはすべてのアプリに必須のものとなっています。

境界線付き、「機能ナビゲーション」ページでよく使用されます

ボーダーレス、ホームページのカテゴリでよく使用される

設計目標

scss 環境では、n グリッドは mixin を通じて実装され、「境界線の有無」と「各グリッドが正方形であるかどうか」をサポートできます。

@include grid(3, 3, true); // 3 x 3、境界線あり、各グリッドは正方形 @include grid(2, 5, false, false); // 2 x 5、境界線なし

最終結果

「パディング率」のヒント

まず、正方形を実現するためのちょっとしたコツを説明します。一度読めば理解できるはずです。結論は次のとおりです。
パディング値がパーセンテージの場合、その値は「親」要素の幅を基準に計算されます。つまり、「親」要素の幅が 100 ピクセルで、「子」要素が padding-top:100% を設定する場合、「子」要素の padding-top は実際には 100 ピクセルに等しくなり、正方形 (100 x 100) になります。干渉を減らすために、「子」要素の高さを 0 に設定します。

デザインアイデア(SCSS かどうかは関係ありません)

  1. 内部要素の水平/垂直の中央揃えを容易にするために、全体としてフレックスレイアウトを使用します。
  2. スペースを占有するために正方形を使用します。padding-top: 100% が使用されているため、コンテンツを保持するために別の div を使用する必要があります。これを「item__content」と名付けました。
  3. コンテンツ コンテナー div が正方形を埋め尽くすように、スタイルを次のように設定します: position: absolute; top: 0; left: 0; right: 0; bottom: 0;;

したがって、HTML は次のようになります。

<!-- a-grid はフレックス コンテナであり、コンテンツを「水平方向/垂直方向に中央揃え」することが簡単になります -->
<div class="a-grid">
  <!-- a-grid__item は正方形を実現するためのスペースを占めるために使用されます -->
  <div class="a-grid__item">
      <!-- item__content はコンテンツの実際のコンテナです-->
      <div class="item__content">
        コンテンツ...
      </div>
  </div>
</div>

コード (scss)

ここでは 3 つのことが行われます。

  1. 冗長性を避けるため、共通部分を抽出して「.a-grid」という名前を付けました。
  2. Mixin は、$row (行数)、$column (列数)、$hasBorder (境界線があるかどうか)、$isSquare (各ブロックが正方形であることが保証されているかどうか) の 4 つのパラメータをサポートします。
  3. Mixin は内部的に :nth-child を計算して組み合わせ、「全体として外側の境界線がない」という効果を実現します。
.a-グリッド{
    ディスプレイ: フレックス;
    flex-wrap: ラップ;
    幅: 100%;

    .a-グリッド__アイテム{
        テキスト配置:中央;
        位置:相対;
        >.item__content {
            ディスプレイ:フレックス
            フレックスフロー: 列;
            アイテムの位置を中央揃えにします。
            コンテンツの中央揃え: 中央;
        }
    }
}

@mixin グリッド($行:3、$列:3、$hasBorder:false、$isSquare:true) {
    .a-grid を拡張します。

    .a-グリッド__アイテム{

        flex-basis: 100%/$column;

        @if($isSquare) {
            パディング下部: 100%/$column;
            高さ: 0;
        }

        >.item__content {

            @if($isSquare) {
                位置:絶対;
                上:0;左:0;右:0;下:0;
            }
        }
    }

    @for $index 1 から (($row - 1) * $column + 1) まで {
        .a-grid__item:n番目の子(#{$index}) {
            @if($hasBorder) {
                下境界線: 1px 実線 #eee;
            }
        }
    }

    @for $index 1 から $column まで {
        .a-grid__item:n番目の子(#{$column}n + #{$index}) {
            @if($hasBorder) {
                右境界線: 1px 実線 #eee;
            }
        }
    }
}

使用

// 3行3列の正方形グリッドを生成します。a-grid-3-3 {
    @include グリッド(3, 3, true);
}

// 2 行 5 列の境界のないグリッドを生成します。各グリッドの高さはコンテンツによって決まります。a-grid-2-5 {
    @include グリッド(2, 5, false, false);
}

注意: nxm レイアウトを作成する場合は、@include grid(n, m) を使用した後、HTML に nxm に対応する DOM 構造を追加することを忘れないでください。

ファイナル

内容は非常にシンプルで、実際のデバイス上ではより細く見える「ヘアライン」の境界線に変更できるなど、最適化できる領域はまだ多くあります。

さて、今回はこれで終わりです。もっと良い実装方法があれば、ぜひメッセージを残してください。お読みいただきありがとうございました。

最近、CSS スタイル ライブラリを作成しています。目標はアプレットと互換性を持たせることです。興味のある人は誰でも試すことができます。これは、このレッスンに対応するソース コードです。

https://github.com/any86/3a.css/blob/develop/src/components/_grid.scss

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

<<:  ウェブページエクスペリエンス: 計画と設計

>>:  Docker Swarm 外部検証ロードバランシングが機能しない場合の解決策

推薦する

CSSはボックスコンテナ(div)の高さを常に100%に設定します。

序文ブラウザをどのようにズームしても、ボックス コンテナーの高さを常に 100% に保つ必要がある場...

HTML pre タグ内の自動改行

このとき、overflow:auto;(コードがコンテナの境界を超えたときにスクロールボックスを表示...

MySQLのexecute、executeUpdate、executeQueryの違い

execute、executeUpdate、executeQuery の違い (およびそれらの戻り値...

jQuery エディタ プラグイン tinyMCE の使い方

簡略化されたファイル サイズを変更し、サンプルをダウンロードします。ファイルをローカル コンピュータ...

CentOS 7 で MySQL 5.7.23 をアップグレードする際の落とし穴と解決策

序文最近、CentOS 7 で MySQL 5.7.23 をアップグレードする際に落とし穴を発見しま...

SQL 集計、グループ化、並べ替え

目次1. 集計クエリ1. COUNT関数2. SUM関数3. AVG関数4. MAX関数とMIN関数...

LayUI+Shiroは動的なメニューを実装し、メニュー拡張の例を記憶します

目次1. Maven 依存関係2. メニュー関連クラス1. メインメニュー2. サブメニュー3. S...

Vue における属性とプロパティの具体的な使用法と違い

目次Vue.jsにおける属性とプロパティ値および関連する処理として属性とプロパティの概念属性とプロパ...

MySQL ジョイントテーブル更新デー​​タの詳細な例

1.MySQL UPDATE JOIN構文MySQL では、UPDATE ステートメントでJOIN句...

SNMP4J サーバー接続タイムアウト問題の解決策

弊社のネットワーク管理センターは管理センター兼サーバーとして機能します!各管理対象デバイスは、TCP...

Centos7 から Centos8 へのアップグレードに関するチュートリアル (画像とテキスト付き)

正式な環境でアップグレードする場合は、データと重要な設定をバックアップしてください。アップグレードに...

Linux マルチスレッドにおけるフォークとミューテックス ロック プロセスの例

目次質問: 1. 最初の試み2. 合理的な分析3. 問題解決(1) pthread_join()の使...

Vue バッチ更新 DOM 実装手順

目次シーン紹介深い応答性トリガーゲッターDep.targetを探すゲッターセッター要約するシーン紹介...

MySQL 最適化のヒント: 重複削除の実装方法の分析 [数百万のデータ]

この記事では、MySQL 最適化のヒントで重複したエントリを削除する方法を例を使って説明します。ご参...

VMware Tools を最初からインストールするための詳細な手順 (グラフィック チュートリアル)

VMware Tools は VMware 仮想マシンに付属するツールで、VirtualBox (...