Record a grid layout practical application sharing meeting
Recorded the technology sharing meeting in the group. For students with the same needs, please refer to it
Sharing the whole process, about 45 minutes
The final drawing is as follows: ↓
1, Can it be used in engineering? (compatibility)
The old growth talk, but also a decisive one, is as follows:
We can play with projects without compatible ie browser, and grid is not a new technology. The development of technology needs the promotion of coder. Sometimes we ask ourselves whether the original sin of not using grid is' lazy to learn '. Hahahaha, I checked that the chrome 57 version was released in March 2017
The way of using display: - MS grid for IE can also be effective, but many students have encountered unknown errors on the Internet, so if you really have to be compatible with ie, you should not use grid
2, Skill orientation (a good friend of flex)
Grid will not replace flex, on the contrary, they are very good partners. Using grid layout can break the limit of dom location. If not, it is easy to cause semantic confusion and reduce the robustness. This time, we will explore the actual situation of grid layout
3, 'new way' to guide interest from top, bottom, left, right
An interview question on rotten street, the middle way
You can show grid, so the score must be increased by one point to two points.. here I will introduce the content after 'four kinds' to explain why this happens, and there are many qiyinqiaoji... It can be said that if you learn grid layout, then you have more than six kinds of centering skills!
The overall dom structure is as follows
<div class="wrap"> <div class="box"></div> </div>
Fixed style
.box{ width: 100px; height: 100px; border: 1px solid red; }
Implementation method: it's a bit of playful. It's a random combination of two attributes, highlighting a 'show'
Note that the attribute here is not flex. It belongs to grid in grid layout mode
.wrap{ // Of course, the layout is opened in the same way as flex display: inline-grid | grid; width: 300px; height: 300px; // The first align-items: center; justify-items: center; // The second align-items: center; justify-content: center; // The third align-content: center; justify-items: center; // The fourth align-content: center; justify-content: center; }
4, Horizontal arrangement
When we turn on the layout, we turn on debugging mode. When we hover over the dom, the grid will appear
Unlike flex, simply opening the layout does not affect the layout of the elements and does not compress the stretch height
<style> /* Only when grid layout is turned on, there will be no change. Unlike flex layout, internal elements are arranged in a row by default */ .wrap{ display: grid; height: 100px; width: 300px; border: 1px solid; } .box{ height: 50px; width: 50px; border: 1px solid red; } </style> </head> <body> <div class="wrap"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> </div> </body>
grid-template-columns defines how many parts of the dom are horizontally arranged and how wide each part is
This is to divide dom into four sections, each section is 100px wide, and then we can put content in it
grid-template-columns: 100px 100px 100px 100px;
Horizontal arrangement
<style> .wrap{ display: grid; height: 100px; width: 300px; border: 1px solid; /* 1: Become a line, open this */ /* Three columns in total, 100px each */ grid-template-columns: 100px 100px 100px; } .box{ height: 50px; /* Subcomponent will automatically fill cells if width is not set */ /* Corresponding to the above three 100px*/ border: 1px solid red; } </style> </head> <body> <div class="wrap"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> </div> </body>
repeat defines the repeated parts
For example, if we want to divide the horizontal arrangement into 10 parts, we are obviously clumsy to write 10 100px s. We can use the following methods:
grid-template-columns: repeat(10, 100px);
We want to achieve the following results:
grid-template-columns: 100px 100px 100px 100px 100px 100px 200px 100px 100px 100px 100px;
You can write like this:grid-template-columns: repeat(6, 100px) 200px repeat(4, 100px);
The types of repetition can also be varied
grid-template-columns: 100px 200px 100px 200px 100px 200px 100px 200px 100px 200px 100px 200px
It can be written as follows: (note that there is only one 'comma')
grid-template-columns: repeat(6, 100px 200px);
Auto fill property fills automatically according to the set width
For example, if my dom is 400px wide, the following code will generate 10 40 PX wide grids. Of course, if the dom is 390px wide, it will generate only 9;
grid-template-columns: repeat(auto-fill, 40px);
Skilful jumping
For example, we divide the horizontal row into three grids of 100px each, but I only put two elements in the first and third grids, respectively. Then we can use a technique, which is to put an empty element in the middle, and this empty element should consume as little memory as possible. Then we can try to put a br tag. Of course, this method is not recommended, and the layout will cause some troubles to other students, The code is as follows:
<style> .wrap{ display: grid; height: 100px; width: 300px; border: 1px solid; grid-template-columns: 100px 100px 100px 100px; } .box{ height: 50px; border: 1px solid red; } </style> </head> <body> <div class="wrap"> <div class="box">1</div> <br> <div class="box">3</div> </div> </body>
5, [fr, auto] units and keywords
fr
We know that in flex layout, for example, I wrote flex:1 , which represents a share of the total number of shares in the flex layout. grid also has similar attributes and is more customized semantically. It is fr
The following code means to divide the dom into five parts, each of which is the width of one part
grid-template-columns: repeat(5,1fr);
Divide up the remaining space
grid-template-columns: 120px 1fr 2fr 3fr 1fr;auto
auto keyword, Function and 1 fr Almost, but more semantically
grid-template-columns: 20px 20px auto 20px 20px;auto And 1 fr He's not involved fr The calculation rules of the fr When used at the same time, it will be squeezed into its own width
grid-template-columns: 20px 2fr auto 1fr 20px;
3 in the figure below is the width supported by itselfSix.
minmaxLimited scopeSet the minimum and maximum width below
<style> .wrap{ display: grid; border: 1px solid; width: 300px; height: 100px; /* A basic width, as when compressed*/ /* It can be filled with the number of fr units, which is the advantage */ grid-template-columns: 1fr 1fr minmax(300px,1fr); } .box{ border: 1px solid red; } </style> </head> <body> <div class="wrap"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> </div>
When the parent is 320px wide
When the parent is 200px wide
7, Column lattice
We have forgotten the great shift of the universe, like the Zhang Wuji who learned the Joyoung magic.
The grid template rows property defines the columns
Of course, you can use all the techniques you can use on rows and columns
<style> .wrap{ display: grid; border: 1px solid; height: 200px; width: 500px; grid-template-columns: 1fr 1fr 100px; grid-template-rows: 30px 60px 1fr; } .box{ border: 1px solid red; } </style> </head> <body> <div class="wrap"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> <div class="box">6</div> <div class="box">7</div> <div class="box">8</div> <div class="box">9</div> </div> </body>
8, Element spacing
Distance produces beauty. So many squares need distance.
Fixed code
<style> .wrap{ display: grid; border: 1px solid; height: 300px; width: 300px; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; } .box{ border: 1px solid red; } </style> </head> <body> <div class="wrap"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> <div class="box">6</div> <div class="box">7</div> <div class="box">8</div> <div class="box">9</div> </div> </body>
Add: grid row gap: 10px;
Add: grid column gap: 10px;
Of course, these two attributes can be abbreviated to grid-gap:10px; Or grid-gap:10px 10px;
Give the parent a padding: 10px
Note: it is not supported to write grid row gap: 10px 20px for the time being; that is to say, the unfixed spacing needs other methods.
When we draw a grid, we can also use the space as a grid.
9, Reverse
Grid auto flow: column; grid positioning changes from horizontal to vertical
<style> .wrap{ display: grid; border: 1px solid; height: 300px; width: 300px; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; padding: 10px; grid-gap:10px; /* Define the order of arrangement, similar to the rotation of the box */ /* For example, the vertical layout, similar to the couplet effect, is simply realized */ grid-auto-flow: column; } .box{ border: 1px solid red; } </style> </head> <body> <div class="wrap"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> <div class="box">6</div> <div class="box">7</div> <div class="box">8</div> <div class="box">9</div> </div> </body>
10, The resolution of the center alignment
Here we can explain the principle of alignment at the beginning.
Part I: grid location
<style> .wrap{ display: grid; border: 1px solid; height: 330px; width: 330px; /* The effect is significant when the cell is smaller than the container */ grid-template-columns: 80px 80px 80px; grid-template-rows: 80px 80px 80px; grid-gap:10px; } .box{ border: 1px solid red; } </style> </head> <body> <div class="wrap"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> <div class="box">6</div> <div class="box">7</div> <div class="box">8</div> <div class="box">9</div> </div> </body>
Center
justify-content: center; align-content: center;
be at the right
justify-content: end; align-content: center;
Lower right
justify-content: end; align-content: end;
Concise writing, directly defining two attributes
place-content: center
Strange value range (key!)
Justify content: value range: left right flex end flex start end start
Align content: value range: Flex end flex start end start
Strange point 1: align content cannot use left right
Strange point 2: the flex end attribute works
Strange point 3: you can use left right but not top bottom
It's really weird. It has no head.... I suggest using center end start to make the meaning of exclusive grid clearer.
Part two: cell alignment
Each small grid is like a cell of excel, so the layout of these cells is also very interesting. The first is the overall layout, and the second is its own layout.
<style> .wrap{ display: grid; border: 1px solid; height: 300px; width: 300px; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-gap:10px; justify-items: center; align-items: center; } .box{ height: 50px; width: 50px; border: 1px solid red; } .box4{ justify-self:end; align-self: end; } .box5{ justify-self:start; align-self: start; } .box6{ justify-self:stretch; align-self: stretch; border: 1px solid red; } .box7{ border: 1px solid red; } </style> </head> <body> <div class="wrap"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box box4">4</div> <div class="box box5">5</div> <div class=" box6">6</div> <div class=" box7">7</div> </div> </body>
- The first three receive the parent's justify items: ` align items: ` influence so they are centered up, down, left, right, and so on.
- The 4th self layout has the highest priority and appears in the lower right corner
- 6 and 7 are whether they are stretched because the stretch property is set when the width and height are not set.
stretchWidth to fill cells (default)Through the study here, we can understand the most open and middle way. You can show your skill in the interview.
eleven. dom Ranking
grid-row-startDefine where the grid starts, Where to end, So you don't have to br This kind of station label.
<style> /* Only when grid layout is turned on, there will be no change. Unlike flex layout, internal elements are arranged in a row by default */ .wrap{ display: grid; border: 1px solid; height: 500px; width: 500px; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-gap:10px; } .box{ /* height: 50px; width: 50px; */ border: 1px solid red; } .box1 { /* 1: I'm free to choose where I start and where I end up in the grid */ /* That is to say, breaking the starting value of free arrangement */ grid-column-start: 2; /* 2: The end is the width occupied by this element‘ */ /* Note: cross line continuation is not possible */ grid-column-end: 4; /* 3: Of course, Liesl can play like this*/ /* He went down there without taking up space, which means he didn't go down all the way */ grid-row-start: 2; grid-row-end: 4; /* 4: Simple writing, slash is fake */ /* Why use slashes instead of spaces */ /* Do not write is the default across one */ grid-column: 1 / 3; grid-row: 1 / 3; } </style> </head> <body> <div class="wrap"> <div class="box box1">1: The first grid starts, End of third frame</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> </div> </body>
This kind of writing suddenly appears' / 'diagonal. I feel uncomfortable. I don't know why it is so designed
grid-column: 1 / 3; grid-row: 1 / 3;
It should be noted that there will be calculation in this layout. I personally don't recommend playing this way
12, Eccentric centering (brain hole)
Regular thinking can't go faster. Let me throw bricks.
<style> .wrap{ display: grid; border: 1px solid; height: 300px; width: 300px; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; /* 1: Center items in cells */ justify-items: center; align-items: center; } .box{ /* It can be used to center objects larger than cells */ height: 250px; width: 250px; border: 1px solid red; /* 2: Set 9 cells and put them in the middle cell */ grid-row-start: 2; grid-column-start:2 ; } /* Four corners. The position is completely confused. Don't use it like this */ .box1{ grid-column-start: 1; grid-column-end: 2; } .box2{ grid-column-start: 3; grid-column-end: 4; } .box3{ /* When it comes to the knowledge of grid dislocation, it's not recommended to use it like this. Of course, you can count others, not necessarily others~~~ */ grid-column-start: 1; grid-column-end: 2; grid-row-start: 3; } .box4{ grid-column-start: 3; grid-column-end: 4; grid-row-start: 3; } </style> </head> <body> <div class="wrap"> <div class="box1">horn</div> <div class="box2">horn</div> <div class="box">***** The advantage of this centering is, You can do some articles in four corners,It's a kind of thinking game</div> <div class="box3">horn</div> <div class="box4">horn</div> </div> </body>
Pit point: these four corners are a bit disordered. You have calculated them, but other students are not necessarily right. They need to be sealed
Extension: we can put some patterns in these four corners, which should be very beautiful
13, span keyword
Grid column start: span 2; no need to write the end, indicating the number of stations. Of course, the row property can also be set
In other words, span 3 means that the next three squares in the current position are mine
14, Map layout (essence)
Sometimes we need to be direct. This knowledge point is the soul of grid
grid-template-areas:
As usual, we use grid template columns to draw a grid for dom, and then define a name for each cell. Any name can be used. If the cell name cannot be used, it is defined as'. ', for example:
grid-template-areas: "header header header header" "main main . sidebar" "footer footer footer footer";
In the above code, we can give the internal dom a grid area: header; attribute, then the dom will occupy the top four cells, which is too direct, equivalent to multiple thumbnails
Only the square matrix of 'rectangle' can be written, and it must be integrated. If two 'header s' are incoherent, neither the east nor the West will take effect
<style> .wrap{ display: grid; border: 1px solid; height: 300px; width: 300px; grid-template-columns: repeat(4,1fr); grid-template-rows: repeat(3,1fr); grid-gap:10px; justify-content: center; align-content: center; padding: 10px; /* 1: Visual mapping, my understanding of this is the soul, this function is irreplaceable */ /* '.'Represents an empty cell */ grid-template-areas: "header header header header" "main main . sidebar" "footer footer footer footer"; } .box{ border: 1px solid red; } .box1{ grid-area: header; } .box2{ grid-area: main; } .box3{ grid-area: sidebar; } .box4{ grid-area: footer; } </style> </head> <body> <p>Can be centered with visualization, No one uses it like that, But if you can't think about it, then...</p> <div class="wrap"> <div class="box box1">1</div> <div class="box box2">2</div> <div class="box box3">3</div> <div class="box box4">4</div> </div> </body>
Don't look at it as simple, then you can do something interesting
15, Be careful when moving
I drew a simple game to turn the clicked part black. At that time, I assumed that I would play the most powerful parity ablation game in my brain, but the grid layout had its own limitations and then gave up. I'll show the related problems through the pictures
When I change the position of the ball, the ball in front will supplement the previous position, which makes the position information difficult to calculate. Of course, we can fix each ball, and then cover it with a layer, but there is no need to use grid layout
16, A little inspiration for drawing expressions (similar to my world)
I have drawn a 'windmill' and 'gossip map' before, which will not be shown here, but I have drawn a code of smiling face to share with you:
<style> .wrap{ display: grid; height: 600px; width: 600px; margin: 50px auto; /* If you use auto, the size will be inconsistent, because auto is the width and height of the adaptive */ grid-template-columns: repeat(15,1fr); grid-template-rows: repeat(15,1fr); justify-items: stretch; align-items: stretch; grid-template-areas: ". . . . . a a a a a . . . . . " ". . . b b f1 f1 f1 f1 f1 c c . . . " ". . d g5 g5 f1 f1 f1 f1 f1 f2 f2 e . . " ". f g4 g4 g4 f1 f1 f1 f1 f1 f4 f4 f4 g . " ". f g4 g4 g4 f1 f1 f1 f1 f1 f4 f4 f4 g . " "h g3 g4 g4 g4 f1 f1 f1 f1 f1 f4 f4 f4 f3 i " "h g3 g2 q q f1 f1 f1 f1 f1 r r r f3 i " "h g3 g2 q q f1 f1 f1 f1 f1 f6 f6 f5 f3 i " "h g3 g2 f9 f9 f1 f1 f1 f1 f1 f6 f6 f5 f3 i " "h g3 g2 f9 f9 f1 f1 f1 f1 f1 f6 f6 f5 f3 i " ". j g2 f9 f9 g1 s s s f7 f6 f6 f5 p ." ". j g2 f9 f9 f8 f8 f8 f8 f7 f6 f6 f5 p . " ". . k f9 f9 f8 f8 f8 f8 f7 f6 f6 o . . " ". . . m m f8 f8 f8 f8 f7 n n . . . " ". . . . . l l l l l . . . . . " ; } .box { background-color: black; } .box-a{ grid-area: a; } .box-b{ grid-area: b; } .box-c{ grid-area: c; } .box-d{ grid-area: d; } .box-e{ grid-area: e; } .box-f{ grid-area: f; } .box-g{ grid-area: g; } .box-h{ grid-area: h; } .box-i{ grid-area: i; } .box-j{ grid-area: j; } .box-k{ grid-area: k; } .box-l{ grid-area: l; } .box-m{ grid-area: m; } .box-n{ grid-area: n; } .box-o{ grid-area: o; } .box-p{ grid-area: p; } .box-q{ grid-area: q; display: flex; justify-content: center; align-items: center; background-color: rgb(255, 206, 46); } .box-q::after{ content: ''; display: block; height: 70px; width: 70px; border-radius: 50%; background-color: red; } .box-r{ grid-area: r; } .box-s{ grid-area: s; } .box-t{ grid-area: t; } .f{ background-color: rgb(251, 209, 71); } .f1{ grid-area: f1; } .f2{ grid-area: f2; } .f3{ grid-area: f3; } .f4{ grid-area: f4; } .f5{ grid-area: f5; } .f6{ grid-area: f6; } .f7{ grid-area: f7; } .f8{ grid-area: f8; } .f9{ grid-area: f9; } .g1{ grid-area: g1; } .g2{ grid-area: g2; } .g3{ grid-area: g3; } .g4{ grid-area: g4; } .g5{ grid-area: g5; } .g6{ grid-area: g6; } </style> </head> <body> <!-- Use 3 dom Splicing,Or use a puzzle, The jigsaw can better reflect grid Another advantage of layout --> <div class="wrap"> <div class="box box-a"> v </div> <div class="box box-b"> v </div> <div class="box box-c"> v </div> <div class="box box-d"> v </div> <div class="box box-e"> v </div> <div class="box box-f"> v </div> <div class="box box-g"> v </div> <div class="box box-h"> v </div> <div class="box box-i"> v </div> <div class="box box-j"> v </div> <div class="box box-k"> v </div> <div class="box box-l"> v </div> <div class="box box-m"> v </div> <div class="box box-n"> v </div> <div class="box box-o"> v </div> <div class="box box-p"> v </div> <div class="box box-q"> </div> <div class="box box-r"> v </div> <div class="box box-s"> v </div> <!-- skin colour --> <div class="f f1"></div> <div class="f f2"></div> <div class="f f3"></div> <div class="f f4"></div> <div class="f f5"></div> <div class="f f6"></div> <div class="f f7"></div> <div class="f f8"></div> <div class="f f9"></div> <div class="f g1"></div> <div class="f g2"></div> <div class="f g3"></div> <div class="f g4"></div> <div class="f g5"></div> <div class="f g6"></div> </div> </body>
That's the first picture. It's very comfortable to use grid to draw this picture!!
end
This will be the end of the sharing meeting. If there is any harvest, I'd like to go
Hope to make progress with you