Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

CSS Grid layouts or CSS Grids make it easier and more consistent to create complex responsive Web design layouts across browsers. There are other ways to control the layout of a web page, such as tables, box models, and CSS flex boxes. Although CSS Grid is adopted by most major browsers, it is not an official standard.

index.html

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="box box_1">1</div>
        <div class="box box_2">2</div>
        <div class="box box_3">3</div>
        <div class="box box_4">4</div>
        <div class="box box_5">5</div>
        <div class="box box_6">6</div>
    </div>
</body>
</html>
Copy the code

style.css

* {margin: 0;
    padding: 0;

}
body{
    width: 100vw;
    height: 100vh;
    background-color: rgb(240.223.202);
}


.container .box{
    line-height: 48px;
    text-align: center;
    font-size: 1.75 em;
    color: white;
    
}
.box_1{
    background-color: aquamarine;
}
.box_2{
    background-color:khaki;
}
.box_3{
    background-color:hotpink;
}
.box_4{
    background-color:orangered;
}
.box_5{
    background-color:orchid;
}
.box_6{
    background-color:yellowgreen;
}
Copy the code

The first line of grid code

We add the display:grid attribute to the parent element of the element to be laid out

.container{
    display: grid;
}
Copy the code

.container{
    display: grid;
    grid-template-columns: 100px auto 100px;
    grid-template-rows: 50px 50px;
}
Copy the code
  • grid-template-columnsSpecifies the number of module columns. You can specify the number of columns and the width of each column, whereautoIndicates that remaining space is automatically filled
  • grid-template-rowsThe value of the said50px 50pxHeight changed from 48px to 50px

grid-gap: 3px;
Copy the code

You can add grid-gap given a value of 3px

Next, you can adjust the value to see the effect to experience.

.container{
    display: grid;
    grid-template-columns: 100px auto;
    grid-template-rows: 50px 50px 200px;
    grid-gap: 3px;
}
Copy the code

Fraction units and repeat

Fraction units

grid-template-columns: 1fr 1fr 1fr;
Copy the code

grid-template-columns: 1fr 2fr 1fr;
Copy the code

A fraction is a unit of proportion that remains proportional when the browser window is scaled.

Repeat function

Repeat function can simplify our definition of coding, with repeat we do not need to repeat 1fr 3 times, in fact, 3 times is fine, if we think about repeating 100 times, do we need to repeat 100 times 1fr.

grid-template-columns: repeat(3.1fr);
Copy the code
grid-template-columns: 1fr 1fr 1fr;
Copy the code

This can be repeated six times by repeat

grid-template-columns: repeat(6.1fr);
Copy the code

Here’s an easy way to say it

grid-template: repeat(2.50px) /repeat(3.1fr);
Copy the code

A classic layout

Most of the layout of web applications today is like this

HTML layout

<body>
    <div class="container">
        <div class="header">Header</div>
        <div class="menu">Menu</div>
        <div class="content">Content</div>
        <div class="footer">Footer</div>
    </div>
</body>
Copy the code

I’m going to set up my basic CSS file,

* {margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100vw;
    height: 100vh;
    background-color:lemonchiffon;
}

.container div{
    font-size: 2em;
    color: white;
}

.container :nth-child(1) {background-color:burlywood;
}

.container :nth-child(2) {background-color: violet;
}

.container :nth-child(3) {background-color: tomato;
}

.container :nth-child(4) {background-color: teal;
}
Copy the code
.container{
    display: grid;
    grid-gap: 5px;
    grid-template-rows: repeat(2.50px);
    grid-template-columns: repeat(2.1fr);
}
Copy the code

.header{
    grid-column-start: 1;
    grid-column-end: 3;
}
Copy the code

Grid-column-start: 1 and grid-column-end: 3; Isn’t there only 2 columns? Grid-column-start: 1 and grid-column-end: 3; .

.container{
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(2.1fr);
    grid-template-rows: 50px 200px 50px;
}
Copy the code

.header{
    grid-column: 1 / 3;
}
.footer{
    grid-column: 1 / 3;
}
Copy the code

Grid-column: 1/3 is a handy way to define grid-column-start: 1 and grid-column-end: 3 above.

.header{
    grid-column: -3 / -1;
}
.footer{
    grid-column: 1 / -1;
}
Copy the code

If you look at the figure below, the advantage of defining -1 as the end position is to add more columns in the middle later on, and we don’t have to change the starting and ending positions of the row.

grid-template-columns: 1fr 3fr;
Copy the code

.container{
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(12.1fr);
    grid-template-rows: 50px 200px 50px;
}

.header{
    grid-column: 1 / -1;
}
.footer{
    grid-column: 1 / -1;
}
.content{
    grid-column: 2/-1;
}
Copy the code

At design time, we also need to consider future extensibility, so I can repeat(12,1fr); Combine grid-column: 2/-1 for content; Flexibility of definition.

.container{
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(12.1fr);
    grid-template-rows: 50px 200px 50px;
}

.header{
    grid-column: 2 / -1;
}
.footer{
    grid-column: 1 / -1;
}
.menu{
    grid-row: 1 / 3;
}
.content{
    grid-column: 2/-1;
}
Copy the code

It’s easy to get what we want with a few tweaks

Set grid areas

That’s another way to do layout,

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

.header{
    grid-area: h;
}
.footer{
    grid-area: f;
}
.menu{
    grid-area: m;
}
.content{
    grid-area: c;
}
Copy the code
grid-template-areas: ". h h h h h h h h h h ." "m c c c c c c c c c c c" ". f f f f f f f f f f .";
Copy the code