In css, the grid layout refers to the "grid layout", which is a two-dimensional system that can handle rows and columns at the same time. You can use the grid layout by applying CSS rules to the parent element and the child elements of the element; and Flex layout refers to "flexible layout" and is a one-dimensional system used to provide maximum flexibility for box models.
(Recommended tutorial: CSS video tutorial)
1. Introduction to flex layout
Flex is an introduction to flexible box (flexible layout). It is a one-dimensional system that provides maximum flexibility for box models.
Use: any container (inline elements can be set to display: inline-block);
Features: spatial distribution is carried out in the line, not the whole
2. Introduction to grid layout
Gird Layout (css grid layout) is the most powerful layout in CSS The system is a two-dimensional system that can handle rows and columns at the same time. You can use the grid layout by applying CSS rules to the parent element (grid container) and the element's child elements (grid element).
Use: set dispay for the parent element: grid; grid-template-colums and grid-template-rows to set several rows and several columns, and then set the child elements to occupy several rows and several columns.
Features: two-dimensional grid structure, very easy to operate and
combat One: Use grid layout to make a simple
html code of nine square grid :
1
2
3
4
5
6
7
8
9
10
11
css code:
1
2
3
4
5
6
7
8
9
10
11
12
.box{ width: 1200px; height: 80vh; display: grid; // enable grid layout grid-template-columns: repeat(3,30%); / / Set the column grid-template-rows: repeat(3,30%); // Set the grid-column-gap: 20px; // Set the spacing between grids grid-row-gap: 20px; // Set the grid Space between grids } .box div{ background-color: #34ce57; } Actual combat 2: Make a common website layout html code: 1 2 3 4 5 6 7 8 9
header
left
center
right
footer
css code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.box { width: 1200px; height: 80vh; display: grid; // Open grid layout grid-template-rows: 10% 80% 10%; // Set the number of rows } .header { background-color: #6ac13c;
display: grid;
/*居中*/
align-content: center;
justify-content: center;
}
.content {
/*background-color: #f1b0b7;*/
display: grid;
grid-template-columns: 10% 80% 10%;
grid-gap: 20px; // 网格之间的间隔
}
.footer {
background-color: #ffc107;
display: grid;
align-items: center;
justify-content: center;
}
.left {
background-color: #5599FF;
}
.center {
background-color: lightgreen;
}
.right {
background-color: orchid;
}