+ Display: grid container using a specified grid layout, using region grid layout, known as the "container" (container). The inner container using the locator sub-element called "Project" (item).
First, the container property
Container elements are block-level element, but the element rows may be provided within the default
display:inline-block
Note: After setting the grid layout, float container sub-elements (items), display: inline-block, display: table-cell, vertical-align Column- * and other settings are invalidated
2, grid-template-columns properties
grid-template-rows属性
After the specified grid layout containers, then we must divide the rows and columns. Gri-template-columns each column attribute definition column width, grid-template-rows to define each attribute high trekking
1 .contain{ 2 display:grid; 3 grid-template-rows: 100px 100px 100px; 4 grid-template-columns:100px 100px 100px; 5 }
(1) repeat()
Parameter rewritable very troublesome, can repeat () function, a simplified duplicate values, repeat () accepts two parameters, the first parameter is the number of repetitions, the second parameter is the repeat value
1 .contain{ 2 display:grid; 3 grid-template-rows: repeat(4,33%); 4 grid-template-columns:repeat(3,33%); 5 } 6 //或 7 .contain{ 8 display:grid; 9 grid-template-rows: repeat(4,100px 20px 80px); 10 grid-template-columns:repeat(4,100px 20px 80px); 11 }
(2) auto-fill keyword
Sometimes the cell size is fixed, but the size of the container uncertain. If desired each row (or without a) receiving as many cells, then you can use the auto-fill keyword
(3) fr Keyword
Grid layout provides fr Keyword (fraction acronym, meaning "fragment"). If the two width 1fr and 2fr, it means twice as much back
1 .contain{ 2 display:grid; 3 grid-template-rows: repeat(4,100px); 4 grid-template-columns:repeat(3,1fr); 5 }
(4)minmax()
MINMAX () function generates a length indicating a length within this range, it accepts two parameters, respectively, the minimum and maximum
1 .contain{ 2 display:grid; 3 grid-template-rows: repeat(5,100px); 4 grid-template-columns:1fr 1fr minmax(300px, 1fr);; 5 }
(5) auto keyword
auto keyword indicates that the length of the decision by the browser yourself
1 .contain{ 2 display:grid; 3 grid-template-rows: repeat(5,100px); 4 grid-template-columns:200px auto 200px; 5 }
(6) the name of gridlines
grid-template-columns attribute and attribute grid-template-rows inside square brackets may also be used to specify the name of each of the grid, to facilitate future reference
1 .contain{ 2 display:grid; 3 grid-template-rows: repeat(5,100px); 4 grid-template-columns:[c1] 100px [c2] 100px [c3] auto; 5 }
Note: the same line grid layout allows a plurality of names, such as [c1 c2]
(7) Layout Example
grid-template-columns properties and grid-template-rows percentage attribute values may be used
1 .contain{ 2 display:grid; 3 grid-template-rows: repeat(5,100px); 4 grid-template-columns:70% 30%; 5 }
3.grid-row-grap attribute grid-column-gap properties grid-gap properties
Spacing (line spacing), grid-column-gap property column to column spacing grid-row-gap property between rows (row pitch)
1 .contain{ 2 display:grid; 3 grid-template-rows: repeat(5,100px); 4 grid-template-columns:200px 200px 200px; 5 grid-row-gap: 20px; 6 grid-column-gap: 20px; 7 }
Note: grip-gap property grip-row-gap and grip-column-gap combined wording
grip-gap:<grip-row-gap><grip-column-gap>
4、grid-template-areas 属性
Grid layout allows to specify "zone" (area), a single region or a plurality of cells form, grid-template-areas for custom attribute area
1 .contain{ 2 display:grid; 3 grid-template-rows: repeat(5,100px); 4 grid-template-columns:200px 200px 200px; 5 grid-gap: 10px 30px; 6 grid-template-areas: 'a a a' 'b c d' 'e f g' ; 7 }
5, grid-auto-flow properties
After meshing, the child elements in the order in the container, automatically placed in each of a grid. The default order is placed after the first column, i.e. to fill the first row, the second row at the beginning into the
Note: grid-auto-flow property determines the default value row, that is, after the first column. Can also be set to cloumn, became the first column underwent
1 .contain{ 2 display:grid; 3 grid-template-rows: repeat(5,100px); 4 grid-template-columns:200px 200px 200px; 5 grid-gap: 10px 30px; 6 grid-template-areas: 'a a a' 'b c d' 'e f g' ; 7 grid-auto-flow:row; 8 } 9 10 11 /* 或 */ 12 .contain{ 13 display:grid; 14 grid-template-rows: repeat(5,100px); 15 grid-template-columns:200px 200px 200px; 16 grid-gap: 10px 30px; 17 grid-template-areas: 'a a a' 'b c d' 'e f g' ; 18 grid-auto-flow:column; 19 }
Note: grid-auto-flow property is provided in addition to the row and the column, you may be provided to row and Dense cloumn dense. These two values are mainly used to specify the position of the project after the arrangement of the remaining positions
1 .contain{ 2 display:grid; 3 grid-template-rows: repeat(5,100px); 4 grid-template-columns:200px 200px 200px; 5 grid-gap: 10px 30px; 6 grid-auto-flow:column dense; 7 //或 8 //grid-auto-flow:row dense 9 }
6, justify-items attribute align-items property attribute place-items
justify-items property cell contents horizontal position (left, right), align-items vertical location attribute in the cell contents (the next)
1 .contain{ 2 display:grid; 3 grid-template-rows: repeat(5,100px); 4 grid-template-columns:200px 200px 200px; 5 grid-gap: 10px 30px; 6 grid-auto-flow:column dense; 7 justify-items: end; 8 align-items:end; 9 //或 place-items:end end; 10 }
Note: pace-items attribute is attribute align-items and properties justify-items combined wording
If the second value is omitted, a default value equal to the first
7, justify-content attribute of the content region horizontal position (left, right), align-content attribute of the content region of the vertical position (Next),
start: start aligned with the container border.
end - the end of frame alignment of the container.
center - the inner container is centered.
Equally spaced on both sides of each item - space-around. Therefore, the gap between the project twice the size of the project and the interval border of the container.
Equally spaced from project to project, and there is no gap between the item and the container frame - space-between.
Equally spaced from project to project, and is the same length of the interval between the item and the container frame - space-evenly.
1 .contain{ 2 display:grid; 3 grid-template-rows: repeat(5,100px); 4 grid-template-columns:200px 200px 200px; 5 grid-gap: 10px 30px; 6 grid-auto-flow:column dense; 7 justify-content: end; 8 align-items: end; 9 //place-content: end start; 10 }
Note: place-content: abbreviated align-content property and justify-content property
8, grid-auto-columns attribute, grid-auto-rows is used to set the property browser excess high mesh row and column widths. They wording identical grid-template-columns and a grid-template-rows. If you do not specify these attributes, browser completely cell contents according to the size of the new grid determines the column width and line height.
1 .contain{ 2 display:grid; 3 grid-template-rows: repeat(3,100px); 4 grid-template-columns:200px 200px; 5 grid-auto-rows: 300px; 6 }
9, grid-template attributes are combined shorthand grid-template-columns, grid-template-rows and grid-template-areas of the three properties.
grid property is grid-template-rows, merge short form grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, grid-auto-flow of these six attributes.
Second, the project property
1, item location can be specified, the method is to specify the specific project four borders, which are positioned at the root line
gird-column-start properties: left border where vertical grid lines
grid-column-end properties: right border where vertical grid
grid-row-start property: on the border where the horizontal grid
grid-row-end property: at the border where the horizontal grid
1 .bgcolor2{ 2 grid-column-start: 1; 3 grid-column-end: 2; 4 grid-row-start: 2; 5 grid-row-end: 4; 6 }
(1) span Keyword
These four attributes can use the keyword span, said, "span", that is, the number of grids around the border (letter box) across
1 .grid1{ 2 background-color: aliceblue; 3 grid-column-start: span 3; 4 }
Note: This is overlapping four properties produced using z-
2.grid-column properties, grid-row property
grid-column properties are combined short grid-colum-start property, and gird-column-end properties
attribute is combined grid-row grid-row-start writing property and grid-row-end properties
1 .grid2{ 2 background-color: aqua; 3 grid-column: 1 / 3; 4 grid-row:1 / 3; 5 } 6 //等价于 7 .grid2{ 8 background-color: aqua; 9 grid-column-start:1; 10 grid-column-end:3; 11 grid-row-start:1; 12 grid-row-end: 3; 13 }
Note: diagonal member and the back may be omitted, a default cross-domain grid
3, which region grid-area property on the specified item
1 .grid2{ 2 background-color: aqua; 3 grid-area: e; 4 // grid-area: 2 / 1 / 3 / 4; 5 }
Note: grid-area property can also be used as a grid-row-start, grid-column-start, grid-row-end, grid-column-end position of the combined direct abbreviations specified item
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
4, justify-self properties, align-self familiar, place-self properties
justify-self property, cell contents horizontal position (left, right), and justify-items consistent usage properties but only for a single item
align-self property, cell contents same vertical position (the lower), property usage and align-items, only a single item
(1) Each of these properties can go four values
start: start align cell edge
end: end of its cell edge
center: the internal grid cells centered
stretch: drawing, occupies the entire cell (default)
1 .grid2{ 2 background-color: aqua; 3 justify-self: stretch; 4 align-self: center; 5 //place-self：stretch center; 6 }
Note: place-self align-self attribute is attribute and attribute justify-self combined wording
If the second value is that the two values will be omitted.
Reference Links: http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html