display:grid in CSS3, an introduction to grid layout

1. Grid layout (grid):

It divides the web page into grids, and you can combine different grids to make a variety of layouts;

2. Basic concepts :

The container and project are shown in the figure:

    <div class="content">
        <div class="b">1</div>
        <div class="b">2</div>
        <div class="b">3</div>
        <div class="b">4</div>
        <div class="b">5</div>
        <div class="b">6</div>
        <div class="b">7</div>
        <div class="b">8</div>
        <div class="b">9</div>
    </div>

.content is the container and .b is the project.

Rows and columns: row: row;

Column: column;

3. Container properties

display:grid; //The default is a block element;

display:inline-grid; //inline block elements

Specify a container to use grid layout;

Note: After setting to grid, the child element's float, display: inline-block, display: table-cell, vertical-align and column-* settings will become invalid.

.content {
            box-shadow: 0 0 1px #f6f;
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
        }

4. Attribute explanation

grid-template-columns: defines the width of each column;

grid-template-columns: 100px 100px 100px; //Three columns in total, each column is 100px wide; =

grid-template-rows: defines the row height of each row;

grid-template-rows: 100px 100px 100px; //From top to bottom, each row is 100px high;

//In addition to using pixels, you can also use percentages;

expand:

It is troublesome to write values ​​repeatedly, so you can use the repeat function;

repeat(number of times, size);

For example: repeat(3,100px); //Repeat 3 times, 100px each time;

Repeat writing method:

grid-template-columns:repeat(3,100px);

grid-template-rows:repeat(3,100px);

You can also repeat a certain pattern of variable size;

For example:

grid-template-columns:100px 80px 100px;

Rewrite it as:

grid-template-columns:repeat(2,100px 80px); // represents repeating the 100px 80px pattern twice; that is, 4 columns;

is equivalent to:

grid-template-columns:100px 80px 100px 80px;

As shown in the figure:

5. Keywords

1. auto-fill; if the container size is not fixed and the item size is fixed, you can use the auto-fill keyword to automatically fill it;

    .content {
            box-shadow: 0 0 1px #f6f;
            display: grid;
            grid-template-columns: repeat(auto-fill, 100px);
} 

2, fr (fraction): If the width of two columns is 1fr and 2fr respectively, it means that the latter is twice the width of the former.

   .content {
            box-shadow: 0 0 1px #f6f;
            display: grid;
            grid-template-columns: 1fr 2fr;
            grid-template-rows: repeat(3, 100px 80px);
}

fr can also be used with px;

        .content {
            box-shadow: 0 0 1px #f6f;
            display: grid;
            grid-template-columns: 400px 1fr 2fr;
} 

3.minmax();

grid-template-columns: 1fr 5fr minmax(100px, 1fr);

Explanation: The first column is 1fr, the second column is 5fr, the third column has a minimum value of 100px and a maximum value of 1fr. When the second column fr is infinite and the third column reaches 100px, it will borrow values ​​from the first column;

       .content {
            box-shadow: 0 0 1px #f6f;
            display: grid;
            grid-template-columns: 1fr 5fr minmax(100px, 1fr);
}

4.auto: adaptive;

   .content {
            box-shadow: 0 0 1px #f6f;
            display: grid;
            grid-template-columns: 100px auto 100px;
}

6. Grid line name:

        .content {
            box-shadow: 0 0 1px #f6f;
            display: grid;
            grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
            grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

Explanation: Specify the name of each grid line for easy reference later.

There can also be multiple names; [c1,c1a]

7. Spacing

row-gap: row spacing;

 .content {
            box-shadow: 0 0 1px #f6f;
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
            row-gap: 20px;
}

colum-gap: column spacing;

 .content {
            box-shadow: 0 0 1px #f6f;
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
            column-gap: 20px;
}

Abbreviation:

gap:20px 20px;

Short forms for row-gap and column-gap;

The gap omits the second value, and the browser considers the second value to be equal to the first value.

8. Region

grid-template-areas: Grid layout allows you to specify "areas", which are composed of a single cell or multiple cells. The grid-template-areas property is used to define areas.

  .content {
            box-shadow: 0 0 1px #f6f;
            display: grid;
            grid-template-areas: 'abc' 'def' 'gh i';
        }

Summarize

The above is the introduction of display:grid and grid layout in CSS3. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!