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 外部検証ロードバランシングが機能しない場合の解決策

推薦する

ショッピングカートのスライド削除効果を実装するReactネイティブサンプルコード

基本的にすべてのeコマースプロジェクトにはショッピングカートの機能があります。これはreact-na...

Windows Server 2016 に Oracle をインストールする方法

1. Oracle をインストールします。インターネット上には Oracle のインストール手順が多...

MySQL の遅いクエリ操作の例の分析 [有効化、テスト、確認など]

この記事では、MySQL のスロー クエリ操作について例を挙げて説明します。ご参考までに、詳細は以下...

HTML チュートリアル: 定義リスト

<br />原文: http://andymao.com/andy/post/104.h...

Vue の高度な構築プロパティの詳細な説明

目次1. ディレクティブカスタムディレクティブ2. ミックスイン3. 継承を拡張する4. 提供して注...

MySQL データベースのバックアップ プロセスに関する注意事項

今日は、データ バックアップに関連するいくつかの点について調べ、MySQL データ バックアップに関...

FileZilla を使用して FTP ファイル サービスを素早く構築する方法

ファイルの保存とアクセスを容易にするために、FTPサービスが特別に構築されています。 FTP サーバ...

MySQLインスタンスを安全にシャットダウンする方法

この記事では、mysqld プロセスをシャットダウンするプロセスと、MySQL インスタンスを安全か...

Docker インストール rocketMQ チュートリアル (最も詳細)

RocketMQ は、Alibaba が設計した分散型のキューベースのメッセージング ミドルウェア...

MySQL DMLステートメントの使用に関する詳細な説明

序文:前回の記事では、注意深い学生であれば発見できたかもしれない DDL ステートメントの使用法を中...

MySQL の 3 つの浮動小数点型 (float、double、decimal) の違いと概要について簡単に説明します。

各浮動小数点型のストレージ サイズと範囲は、次の表に示されています。タイプサイズ範囲(符号付き)範囲...

React Nativeの起動プロセスの詳細分析

はじめに: この記事ではreact-native-cliで作成したサンプル プロジェクト (Andr...

VMware仮想マシンを使用してUbuntu 20.04をインストールする完全なチュートリアル

Ubuntu は比較的人気のある Linux デスクトップ システムです。最近、Ubuntu 20....

Vue3のサンドボックスの仕組みの詳しい説明

目次序文ブラウザコンパイル版ローカルプリコンパイルバージョン要約する序文vue3サンドボックスには主...

Tomcatの起動が遅い問題を素早く解決、超簡単

今日、私はクラスメートが問題を解決するのを手伝いました - Tomcat の起動が非常に遅く、約 5...