ウェブ戦闘へのフロントエンドエントリ：CSSのn宮殿プラッド局を実装する方法？

一般的なシナリオ

今APPインタフェースは、宮殿は現在、基本的には、各APPの存在の必然的なギンガム局となっており、基本的に似ています。

国境では、一般的に「ナビゲーション機能」ページで使用される
ホームでのボーダレス、共通分類

設計目標

SCSS環境では、ミックスインNグリッドを通して達成され、支持体「または国境なき」ことができると「各グリッド正方形かどうか」：

@include grid(3, 3, true); // 3 x 3, 有边框, 且每个格为正方形
@include grid(2, 5, false, false); // 2 x 5, 无边框

最終結果

ウェブ戦闘へのフロントエンドエントリ：CSSのn宮殿プラッド局を実装する方法？

「パディングパーセント」のヒント

まず、広場を達成するためにどのように小さなヒントを説明して読んで、結論はであることを確認します。

パディングのパーセント値は、その後、彼がある場合に「親」演算素子幅相対的に、すなわちなら100pxに幅「親」要素、「子」要素に配置されたパディングトップ：100％、padding- 「子」要素100pxに上部が実質的にこのような干渉を低減するために、正方形（100×100）を達成等しい、我々は0に「子」要素の高さを有し;

デザインのアイデア（無関係なあなたは、SCSS以下です）

水平/垂直中心の内部構成要素を容易にするために、我々は、フレックス全体的なレイアウトを使用します。
私たちは、100％：なぜならパディングトップで、正方形のフットプリントを使用してインストールするには、別のコンテンツのdiv要素を使用する必要が私は彼の名前、「item__contentを。」
するために、コンテナの中身は、DIV正方形の完全な、我々は彼に、設定されたスタイルを与える：位置：絶対;トップ：0 ;左：0;右：0;下：0 ;;

だから、私たちのHTMLはこれです：

<!-- a-grid是一个flex容器, 方便他的内容做"水平/垂直居中" -->
<div class="a-grid">
  <!-- a-grid__item用来占位实现正方形 -->
  <div class="a-grid__item">
      <!-- item__content才是真正装内容的容器 -->
      <div class="item__content">
        内容...
      </div>
  </div>
</div>
专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享学习方法和需要注意的小细节，互相交流学习，不停更新最新的教程和学习技巧（从零基础开始到WEB前端项目实战教程，学习工具，全栈开发学习路线以及规划）

コード（SCSS）

3つのことを行うためにここに：

冗長化しないために、私は、共通の「名前一部引き出さ.A-グリッド」;
ミックスインのサポート4つのパラメータ、即ち、境界がある場合$行（行数）、$カラム（列）、$ hasBorder（。）、$ isSquareが（各ブロック）は正方形であるかどうかを保証する
内部のmixin計算と結合：n番目の子が「ノー全体の外側の境界線」の効果を達成するため、

.a-grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    .a-grid__item {
        text-align:center;
        position:relative;
        >.item__content {
            display:flex
            flex-flow: column;
            align-items: center;
            justify-content: center;
        }
    }
}

@mixin grid($row:3, $column:3, $hasBorder:false, $isSquare:true) {
    @extend .a-grid;

    .a-grid__item {

        flex-basis: 100%/$column;

        @if($isSquare) {
            padding-bottom: 100%/$column;
            height: 0;
        }

        >.item__content {

            @if($isSquare) {
                position:absolute;
                top:0;left:0;right:0;bottom:0;
            }
        }
    }

    @for $index from 1 to (($row - 1) * $column + 1) {
        .a-grid__item:nth-child(#{$index}) {
            @if($hasBorder) {
                border-bottom: 1px solid #eee;
            }
        }
    }

    @for $index from 1 to $column {
        .a-grid__item:nth-child(#{$column}n + #{$index}) {
            @if($hasBorder) {
                border-right: 1px solid #eee;
            }
        }
    }
}

使用

// 生成一个 3行3列, 正方形格子的宫格
.a-grid-3-3 {
    @include grid(3, 3, true);
}

// 生成一个 2行5列, 无边框宫格, 每个格子由内容决定高度
.a-grid-2-5 {
    @include grid(2, 5, false, false);
}
专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享学习方法和需要注意的小细节，互相交流学习，不停更新最新的教程和学习技巧（从零基础开始到WEB前端项目实战教程，学习工具，全栈开发学习路线以及规划）

私たちは思い出させる：n×m個のようにHTML DOM n×mの対応する構造に追加することを忘れないでくださいと@includeグリッド（n、m）は後のレイアウトを行います。

決勝

、多くの場所があるよう境として、非常に単純な最適化することができ、これらの内容は、実際のマシンの外観をより薄く、より。まあの「毛」の境界線に変更することができ、達成するためのより良い方法がある場合は、議論を開始し、メッセージを残してください、お読みいただきありがとうございました。