Implementation of Grid common layout

No gaps on both sides, gaps between each column

width: 100%;  
display: grid;  
grid-template-columns: repeat(4,1fr);  
justify-items: stretch;  
grid-gap: 1px;

Property introduction: The justify-items property sets the horizontal position of the cell content (left, center, and right), and align-items property sets the vertical position of the cell content (top, center, and bottom).

• start: Align the starting edge of the cell.
• end: Aligns to the end edge of the cell.
• center: The cell is centered inside.
• stretch: stretch to fill the entire width of the cell (default value).

Property introduction: After the container specifies the grid layout, it then needs to be divided into rows and columns. grid-template-columns property defines the width of each column, and grid-template-rows property defines the height of each row. repeat(4,1fr) means repetition. The first parameter indicates the number of times. There are 4 columns here, which means 4 times. 1rf means the concept of portions. repeat(4,1fr) means it is divided into 4 portions equally.

The effect is as follows:

The gaps between rows and columns are the same, and the vertical direction is prioritized.

.swiper-slide-inner {  
    width: 100%;  
    display: grid;  
    /*Vertical arrangement first*/  
    grid-auto-flow: column;  
    /* Divide into three columns, average score*/  
    /*grid-template-columns: repeat(3, 1fr);*/  
    grid-template-columns: 1fr 1fr 1fr;  
    /* Divide into 2 rows, distribute evenly*/  
    /*grid-template-rows: repeat(2, 1fr);*/  
    grid-template-rows: 1fr 1fr;  
    grid-row-gap: 10px;  
    grid-column-gap: 10px;  
    .card-item {  
        display: flex;  
        flex-wrap: wrap;  
        width: 230px;  
        height: 230px;
    }
}

Property introduction: After dividing the grid, the sub-elements of the container will be automatically placed in each grid in order. The default placement order is "rows first, columns later", that is, fill up the first row first, and then start placing the second row, which is the order of the numbers in the figure below. This order is determined by grid-auto-flow property, and the default value is row , which means "rows first, then columns". You can also set it to column , which means "columns first, rows later".

The effect is as follows:

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.