web front-end entry to the combat: how to implement css n Palace Plaid Bureau?

Common scenarios

Now APP interface are basically similar, the palace is now basically become inevitable gingham Bureau of the existence of each APP.

With borders, commonly used in the "navigation feature" page
borderless, common classification at Home

Design goals

In scss environment, achieved through mixin n grids, and can support "or without Borders" and "whether each grid square":

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

final effect

"Padding percent" Tips

First explain a small tips on how to achieve a square, will ensure read through, the conclusion is:

If the percentage value of the padding, then he is relatively "parent" computing element width , i.e. if the "parent" element width is 100px, "child" elements disposed padding-top: 100%, padding- " child" elements 100px top substantially equal, thus achieving a square (100 x 100) in order to reduce interference, we have "child" elements height to 0.;

Design ideas (unrelated you are scss or less)

1. In order to facilitate the internal elements of the horizontal / vertical center, we use flex overall layout.
2. Use a square footprint, because with the padding-top: 100%, so we need to use a separate content div to install , I named him " item__content ."
3. In order to make the contents of the container div full of squares, we give him a set style: position: absolute; top: 0 ; left: 0; right: 0; bottom: 0 ;;

So our html is this:

<!-- 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前端项目实战教程，学习工具，全栈开发学习路线以及规划）

Code (scss)

Here to do three things:

In order not redundant, I pulled out a common part named " .a-Grid ";
mixin support four parameters, namely, $ row (number of rows), $ column (columns), $ hasBorder (if there is a border ), $ isSquare (guaranteed whether each block is a square).
internal mixin calculated and binding: nth-child achieve "no overall outer border" effect,

.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;
            }
        }
    }
}

use

// 生成一个 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前端项目实战教程，学习工具，全栈开发学习路线以及规划）

We remind : nxm as do the layout after @include grid (n, m) with Do not forget to add in html dom nxm a corresponding structure.

finally

Very simple, there are many places can be optimized, such as border can be changed to "hair" borders on the real machine look thinner more. Well, these contents, start a discussion, if there is a better way to achieve please leave a message , thank you for reading.