How to implement n-grid layout in CSS

Common application scenarios

The interfaces of current APPs are basically the same, and the grid layout has become a necessity for every APP.

With border, often used in "Function Navigation" page

Borderless, commonly used in home page categories

Design goals

In the scss environment, n-grids are implemented through mixin, and can support "with or without borders" and "whether each grid is square":

@include grid(3, 3, true); // 3 x 3, with borders, and each grid is a square @include grid(2, 5, false, false); // 2 x 5, without borders

Final result

"Padding Percentage" Tips

First, let me explain a little trick, how to achieve a square. I guarantee you will understand it after reading it once. The conclusion is:
If the padding value is a percentage, it is calculated relative to the width of the "parent" element. That is to say, if the width of the "parent" element is 100px, and the "child" element sets padding-top:100%, the padding-top of the "child" element is actually equal to 100px, thus achieving a square (100 x 100). In order to reduce interference, we set the height of the "child" element to 0;

Design ideas (regardless of whether you are scss or less)

1. In order to facilitate the horizontal/vertical centering of internal elements, we use flex layout as a whole.
2. Use a square to occupy the space. Because padding-top: 100% is used, we need to use a separate div to hold the content. I named it "item__content".
3. In order to make the content container div fill the square, we set the style for it: position: absolute; top: 0; left: 0; right: 0; bottom: 0;;

So our html looks like this:

<!-- a-grid is a flex container, which makes it easy to "center horizontally/vertically" its content -->
<div class="a-grid">
  <!-- a-grid__item is used to take up space to realize the square -->
  <div class="a-grid__item">
      <!-- item__content is the actual container for the content-->
      <div class="item__content">
        content...
      </div>
  </div>
</div>

Code (scss)

Three things are done here:

1. In order to avoid redundancy, I extracted the common part and named it ".a-grid";
2. Mixin supports 4 parameters, namely $row (number of rows), $column (number of columns), $hasBorder (whether there is a border), and $isSquare (whether each block is guaranteed to be a square).
3. Mixin internally calculates and combines :nth-child to achieve the effect of "no outer border as a whole".

.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

// Generate a 3-row, 3-column, square grid. a-grid-3-3 {
    @include grid(3, 3, true);
}

// Generate a 2-row, 5-column, borderless grid, where the height of each grid is determined by the content. a-grid-2-5 {
    @include grid(2, 5, false, false);
}

Reminder: If you want to make a nxm layout, don't forget to add nxm corresponding DOM structures in HTML after using @include grid(n, m).

final

The content is very simple, and there are still many areas that can be optimized, such as the border can be changed to a "hairline" border, which looks thinner on the real device.

Well, that's all for now. If you have a better way to implement it, please leave a message. Thank you for reading.

I'm writing a CSS style library recently, the goal is to be compatible with applet, everyone who is interested can play with it, this is the source code corresponding to this lesson:

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

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.