CSS3 display: grid, grid layout introduction

Time:2020-3-25

1. Grid:

It divides web pages into grids, and can combine different grids to make all kinds of layout;

2. Basic concepts

Containers and items as shown:


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

Row and column: row;

Column: column;

3. Container properties

Display: grid; / / the default is block element;

Display: inline grid; / / inline block element

Specify a container to use grid layout;

   

Note: when grid is set, the settings of child elements such as float, display: inline block, display: table cell, vertical align and column – * will be invalid.


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

4. Attribute interpretation

Grid template columns: define the column width of each column;

Grid template columns: 100px 100px 100px; / / there are 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, the height of each row is 100px;

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

Expand:

It is troublesome to write values repeatedly. Repeat function can be used;

Repeat (times, size);

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

Repeat:

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

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

You can also repeat an unfixed size pattern;

For example:

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

Rewrite as follows:

Grid template columns: repeat (2100px 80px); / / represents the pattern of repeating 100px 80px twice; that is, four columns;

The same as:

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

As shown in the picture:

5. keyword

1. Auto fill; if the container size is not fixed and the project size is fixed, auto fill keyword can be used to automatically fill;

        


    .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 as wide as 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 is 100px, it will borrow value 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. Gridline 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 gridline for future reference.

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;

Row gap and column gap abbreviations;

Gap omits the second value, which the browser considers equal to the first.

8. area

Grid template areas: a grid layout allows you to specify an area, which consists of a single 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: 'a b c' 'd e f' 'g h i';
        }

 

summary

The above is the introduction of display: grid and grid layout in CSS3 introduced by Xiaobian to you. I hope it can help you. If you have any questions, please leave a message to me, and Xiaobian will reply to you in time. Thank you very much for your support of the developepaer website! If you think this article is helpful to you, welcome to reprint, please indicate the source, thank you!