Two ways to introduce CSS grid layout (grid) (with code)

CSS Grid layout (GRID) can divide a Web page into rows and columns with simple attributes, use CSS to position and adjust each element in the grid directly, and do not need to be nested in multiple layers to implement a layout, in a nutshell, the CSS grid layout is very useful, Let's take a look at the content of the CSS grid layout that this article tells you.

1. CSS Grid layout (GRID)

The CSS grid layout consists of two core components, the parent element and the child element, the actual grid (the grid), and the child elements within the grid (GRID) content.
Here is a parent element and six child elements

<div class = "box">
        <div class = "item div1"> 1 </ div>
        <div class = "item div2"> 2 </ div>
        <div class = "item div3"> 3 </ div>
        <div class = "item div4"> 4 </ div>
        <div class = "item div5"> 5 </ div>
        <div class = "item div6"> 6 </ div>
    </ div>
To turn the parent element into a grid, simply set its display property to grid

:



The following grid layout:

 .box {
            width: 350px;
            height: 350px;
            / * background: #ccc; * /
            margin: 0 auto;
            grid-gap: 5px;
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
        }

        .item {
            border: 1px solid black;
            box-sizing: border-box;
        }

        .div1 {
            grid-column-start: 1;
            grid-column-end: 3;
            / * (div1 starts from the first grid line and ends at the third grid line) * /
            line-height: 100px;
            text-align: center;
            background: rgb (252, 0, 0);
            / * grid-column: 1/3; (this is the abbreviated form) * /
        }

        .div2 {
            line-height: 100px;
            text-align: center;
            background: rgb (252, 134, 0);
        }

        .div3 {
            grid-row-start: 2;
            grid-row-end: 4;
            / * grid-row: 2/4; (this is the abbreviated form) * /
            line-height: 200px;
            text-align: center;
            background: rgb (21, 207, 108);
        }

        .div4 {
            grid-column-start: 2;
            grid-column-end: 4;
            line-height: 100px;
            text-align: center;
            background: rgb (18, 21, 189);
            / * grid-column: 2/4; (this is abbreviated form) * /
        }

        .div5 {
            line-height: 100px;
            text-align: center;
            background: rgb (16, 170, 197);
        }

        .div6 {
            line-height: 100px;
            text-align: center;
            background: rgb (172, 126, 199);
        }
The grid line in the above code (the place indicated by the arrow is a grid line):

2. Responsive grid layout

Similar to the above (added the following content)
Use the grid-template-columns attribute to create a 12-column grid, each column is a unit width (1/12 of the total width)
Create 3 rows using grid-template-rows property

Use the grid-gap property to add a gap between grid items in the grid.

code show as below:

       <div class = "container">
        <div class = "header"> The top (a dot represents a blank grid), so there is a grid distance from the left and right. </ div>
        <div class = "menu"> Middle 1 </ div>
        <div class = "content"> Middle 2 so you can use the blank grid to lay out the webpage you want to shoot </ div>
        <div class = "footer"> the bottom (a dot represents a blank square), so there are three squares away from the right. </ div>
    </ div>
Add grid-template-areas
This property is called the grid area, also called the template area, which allows us to easily conduct layout experiments.
:


code show as below:

        .container {
            display: grid;
            grid-template-columns: repeat (12, 1fr);
            grid-template-rows: 50px 350px 50px;
            grid-gap: 5px;
            grid-template-areas: ". h h h h h h h h h h." "m m c c c c c c c c c c" "f f f f f f f f f...";
        }

        .container> p {
            border: 1px solid #ccc;
            box-sizing: border-box;
        }

        .header {
            text-align: center;
            line-height: 50px;
            grid-area: h;
            color: rgb (219, 52, 169);
        }

        .menu {
            grid-area: m;
            text-align: center;
            line-height: 350px;
        }

        .content {
            text-align: center;
            line-height: 350px;
            grid-area: c;
            color: rgb (25, 158, 69);
        }

        .footer {
            color: rgb (212, 112, 18);
            text-align: center;
            line-height: 50px;
            grid-area: f;
        }