CSS sort of knowledge of Grid Grid roughly 1

Grid Grid Properties About CSS provided allows us to more easily write and page layout, and some of its major application attributes are as follows:

1. The display attribute value of the parent container by the grid mesh can convert it to a container;

2. Add attribute columns in the grid container: grid-template-columns;

         ag：

 1 <div class="container">
 2   <div class="d1">1</div>
 3   <div class="d2">2</div>
 4   <div class="d3">3</div>
 5   <div class="d4">4</div>
 6   <div class="d5">5</div>
 7 </div>
 8 
 9 
10 
11 
12 <style>
13   .d1{background:LightSkyBlue;}
14   .d2{background:LightSalmon;}
15   .d3{background:PaleTurquoise;}
16   .d4{background:LightPink;}
17   .d5{background:PaleGreen;}
18   
19   .container {
20     font-size: 40px;
21     width: 100%;
22     background: LightGray;
23     display: grid;
24     /* add your code below this line */
25   grid-template-columns:100px 100px 100px;
26     
27     /* add your code above this line */
28   }
29 </style>

effect:

 

 3. Add the container grid line attributes: Template-Grid-rows; (usage added columns with the same method);

4. Change the row / column size units: fr: available area; auto: custom size; xxpx: px specific value;

5. Create a blank column width (column gap): grid-columns-gap;

     AG: chestnut above with a modifying parent element contain attributes, as follows:

        

 1 .container {
 2     font-size: 40px;
 3     min-height: 300px;
 4     width: 100%;
 5     background: LightGray;
 6     display: grid;
 7     grid-template-columns: 1fr 1fr 1fr;
 8     grid-template-rows: 1fr 1fr 1fr;
 9    
10     grid-column-gap:20px;     //列宽20px;
11 
12   }

Results are as follows:

 

 6. Create a line gap: grid-row-gap; (usage is consistent with add column gap);

7. Article synthesis of 5,6, in order to more easily create the row and column spacing gap (shortcut): grid-gap attribute;

8. change a column width of a grid square occupied: grid-column; this attribute works: The following table from left to right the number of columns, number of rows from the top down;

 

 

     Or more of chestnuts, changing its item5 style:

. 1  .item5 {
 2      background : PaleGreen ;
 . 3     
. 4      Grid-column : 2/4 ;   // gap from the second row - fourth, i.e., from the second column to the third column
 . 5      
. 6    }

Results are as follows:

 

 

9. Change a square occupied by a high line: grid-row attributes; (principle supra);

10. The cell of the cell alignment property: justify-self;

        This attribute of the following parameters: stretch: default fill the entire cell; start: Left; center: Align; end: right alignment;

11. The cell with the cell vertical alignment settings: align-self property; (acceptable value coincides with the vertical direction)

12. aligned in the horizontal direction all entries: justify-items; (received parameter matches the value of the attribute of the receiver is aligned with the above);

13 aligned in the vertical direction of all the property item; align-items; (received parameter matches the value of the attribute of the receiver is aligned with the above);