↵
Earlier we said we elastic layout knowledge point, we all know the benefits of elastic layout is unidimensional . We can think about, since there is a dimension of the matter, then there must also have a multi-dimensional layout of it! Today, we just say scrim army, its advantage is multidimensional.
display: grid; basic usage
The role of grammar in the parent container above
- display: grid; our statement that the container will use a grid layout
- grid-template-columns: the number of columns
- grid-template-rows: Number of rows disposed
- grid-template-areas: divided region, the region must be rectangular, not rectangular grid block invalid
- Composite wording: grid-template: Composite writing columns, number of rows Oh, divided area
- NOTE: fr grid units (ratio of units);
Consider the following code and renderings:
We now see the three figures followed by the code css, html code and renderings.
From the first picture we can see part of a comment up, we talked about above, Grid-Template is the number of columns, rows, oh, divided composite writing area; that is, we annotate it is entirely possible that part Alternatively grid-template-columns, the attribute value grid-template-rows and grid-template-areas, the effect is the same. We can try privately, there is a good old saying: practice makes perfect. Haha
Surely we found it! Our each of the grid are the same size, so some people will doubt it! That there is not the same as the heroes of it! For example, some Web sites, here we quote about Bernd Kammerer website, interested partners can take a look, the picture is as follows:
Here we have a clear picture of sample sizes, sample sizes means that the picture of our grid sizes are not the same. So how to achieve this effect it ?
Next, I for everyone Secret, look at the code:
<style>
#main{
width: 300px;
height: 300px;
margin: 40px auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"a1 a2 a3"
"a1 a5 a6"
"a7 a8 a8";
align-items: center;
text-align: center;
#main div{height: 100%;}
#main .b1{grid-area: a1;background-color: blue;}
#main .b2{grid-area: a2;background-color: red;}
#main .b3{grid-area: a3;background-color: yellow;}
#main .b4{grid-area: a5;background-color: teal;}
#main .b5{grid-area: a6;background-color: tomato;}
#main .b6{grid-area: a7;background-color: hotpink;}
#main .b7{grid-area: a8;background-color: lightskyblue;}
}
</style>
What can we find in accordance with the above two pictures of it?
FIG effect is not found inside the grid size and the other two are not the same. Why will not the same? We look at the code value of which grid-template-areas, we found that there are two of a series which a1, two a8, then see FIG code inside the first class section, we will find a new attribute : grid-area; it is useful to target a specific region of the container to a specific (here misnomer hope forgive me!). For example, the region a1 in the class assigned to b1, and so on. I want you with smart brain can understand it.
Well! Then we say that a following and line spacing
7.grid-column-gap: the pitch of the column
Line spacing: 8.grid-row-gap
9.grid-gap: complex wording. grid-row-gap grid-column-gap
/* 给我们的main添加列间距 */
grid-column-gap: 6px;The following is the case, see Figure:
We can clearly see that the spacing between columns is generated in the column, Note: only in the pitch between the two grids.
/* 给我们的main添加行间距 */
grid-row-gap: 6px;
Similarly, we can clearly see the spacing generated between lines, Note: only in the pitch between the two grids.
After we see here, if we can understand and grasp, then Xiao Bian here to congratulate you, you have to master the initial grid layout to use it!
Next we look at some of the code we are more familiar with,
justify-items: the middle level embodiment subkey
Default: stretch default value, tensile. Horizontal or vertical filling performance.
Start
Center
End
align-items: vertical center subkey embodiment
Default: stretch default value, tensile. Horizontal or vertical filling performance.
Start
Center
End
Place-items: Composite writing
align-items justify-items
justify-content: horizontal alignment of the grid overall
default: Stretch
Start
End
Center
Space-BETWEEN
Space-around
Space-EVENLY
align-content: vertical alignment of the entire grid
Default: Stretch
Start
End
Center
Space-BETWEEN
Space-around
Space-EVENLY
place-content: complex wording
align-content justify-content
to see where we are not feeling particularly familiar with it? Yes, exactly above these basic attributes and our flexible layout inside. Again I will not do more to explain it! If do not understand, you can click here to elastic layouts , to find out.
The role of grammar in the above sub-container
Let's talk about the role of some commonly used property values in children above
- grid-area: look for designated areas
1. name corresponding to the grid
2. The corresponding write digit line: Grid-Area:. 1 /. 3 / span 2 /. 4;
Grid-Start-Row / column-Grid-Start / End-Grid-Row / column-Grid -end
occupied by the grid-column-start position in the horizontal direction starting
end position occupied by the grid-column-end horizontal
starting position in the vertical direction occupied by grid-row-start
occupied vertically grid-row-end end position
