There are some powerful layout methods in CSS. Most of them are easy to operate. With a small amount of CSS code, more complex page layouts can be realized.
<div class="wrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>.wrapper {
margin: 0 auto;
width: 80%;
display: grid;
grid-template-columns: 100px 100px 100px;
}
.item {
height: 100px;
background-color: rgba(0,0,255,0.4);
border: 1px solid #000000;
box-sizing: border-box;
line-height: 100px;
font-size: 30px;
text-align: center;
color: white;
}
1. Grid container:
Among them, the grid container is a div tag whose class value is wrapper. This label needs display: grid; to enable grid layout.
frThe device is only suitable for free space in the container
1. Grid-template-columns attribute: set the grid container column attributes
The set value can be a percentage or a specific value. For several values, several columns will be set. If the sum of the set values exceeds the width of the parent container, a scroll bar will appear
Figure 1.1 above: the specific values set in the figure above.
Setting the percentage will refer to the width of the grid container itself. If there is no width, go back up until it finds the ancestor element of the set width, or the width of the body tag is the width of the grid container.
2. Grid-template-rows attribute: set the grid container row attributes
The set value can be a percentage or a specific value, and several columns will be set for several values.
3.grid-template-areas attribute: grid block
grid-template-areas: "a b c"
"a b c"
"a b c"; 三行三列
grid-template-areas: "a b"; one row and two columns
Each given string will generate a row, and each cell separated by a space in a string will generate a column. Multiple cells with the same name that span adjacent rows or columns are called grid areas. Non-rectangular grid blocks are invalid.
/* 网格项中设置grid-area属性就可以占位特定的单元格 */
.wrapper {
grid-template-areas: "a b c"
"a b c"
"a b c";
}
.item:nth-child(odd) { grid-area: b; }
.item:nth-child(even) { grid-area: a; }
4.grid-column-gap: specify the size of the grid line
It can be thought of as the spacing or width between cells, and you can set a percentage or specific value.
5.grid-row-gap: Same as above
6. Grid-gap: shorthand for the above two attributes, the first value is the value of grid-column-gap, the second value is the value of grid-row-gap
7.justify-items: align the contents of the grid items along the column axis
start : the content is aligned to the left in the grid area
end : the content is aligned to the right in the grid area
center : the content is aligned in the center of the grid area
stretch : The content width occupies the entire grid area (default value)
8.align-items: align the contents of the grid items along the row axis
start : The content is aligned to the top in the grid area
end : the content is aligned at the bottom of the grid area
center : the content is aligned in the center of the grid area
stretch : The content width occupies the entire grid area (default value)
9.justify-content: align the grid along the column axis
start -the grid is aligned to the left in the grid container
end -the grid is aligned at the right end of the grid container
center -the grid is centered in the grid container
stretch -adjust the size of the grid items so that the width fills the entire grid container
space-around -set an even number of space gaps between the grid items, and the size of the most edge gap is half the size of the middle space gap
space-between -Set an even number of space gaps between grid items, with no gaps at the extreme edges
space-evenly -Set an even number of space gaps between grid items, and the most edge gap is the same as it
10.align-content: align the grid along the row axis
start -the grid is aligned at the top in the grid container
end -the grid is aligned at the bottom of the grid container
center -the grid is aligned at the center in the grid container
stretch -adjust the size of the grid item so that its width fills the entire grid Container
space-around -set an even number of space gaps between grid items, the size of the most edge gap is half the size of the middle space gap
space-between -set an even number of space gaps between grid items, and there is no gap at the extreme edge
space-evenly -Set an even number of space gaps between grid items, and the most edge gap is the same as it
11.grid-auto-columns和 grid-auto-rows
Specify the size of any automatically generated grid tracks (also known as implicit grid tracks). When explicitly positioning rows or columns outside the defined grid range (via grid-template-rows / grid-template-columns), implicit grid tracks will be created.
.wrapper {
grid-auto-columns: 100px;
grid-auto-rows: 100px;
}
.item:nth-child(1) {
grid-column: 1 / 4;
grid-row: 1 / 1;
background-color: #000000;
}
grid-column: 1/4 means starting from the first column line to the end of the fourth column line, occupying three columns in total
grid-row: 1/1 means from the beginning of the first line to the end of the first line, a total of one line
12.grid-auto-flow:
If you have grid items that are not explicitly placed on the grid, the auto layout algorithm will start to automatically place the items. This property is used to control the working principle of the automatic layout algorithm.
row : tells the auto layout algorithm to fill each row in turn, and add new rows as needed
column : tells the auto layout algorithm to fill each column in turn, and add new columns as needed
dense : tells the auto layout algorithm to try to fill in the grid earlier There are gaps left by smaller items
.wrapper {
grid-template-columns: 100px 100px 100px 100px 100px;
grid-template-rows: 120px 120px 120px;
grid-auto-flow: row;
}
.item:nth-child(2) {
grid-column: 1;
grid-row: 1 / 4;
background-color: #000000;
}
.item:nth-child(9) {
grid-column: 5;
grid-row: 1 / 4;
background-color: #000000;
}
13.grid:
Set in a row a statement about all the attributes of shorthand: grid-template-rows, grid-template-column, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow. It grid-column-gapand the grid-row-gap
property is set to an initial value, whereby even if they are not explicitly attribute to set.
Attribute values :
none : all sub-attributes set to an initial value
subgrid : a grid-template-rowsand grid-template-columnsattribute value to subgrid remaining sub-attribute is set to an initial value
<Grid-Template-rows> / <Grid-Template-Columns> : to grid-template-rowsand grid-template-columns
are provided specified value, the remaining sub-attribute is set to an initial value
<Grid-Auto-Flow> [<Grid-Auto-rows> [/ <Grid-Auto-Columns>]] : grid-auto-flow, grid-auto-rowsand the grid-auto-columnsproperties were treated with the same value, if omitted grid-auto-columnsProperty, it will be set to grid-auto-rowsthe value of the property. If both are ignored, then both will be set to the initial value.
2. Grid items:
Among them, the grid item (child node of the grid container) is a div tag with a class value of item.
1.grid-column-start: Determine the position of the grid item in the grid by using a specific grid line
2.grid-column-end:
3.grid-row-start:
4.grid-row-end
number: specific grid line
span <number> : the grid item contains the specified number of grid tracks
span <name> : the grid item contains the grid track before the grid line of the specified name grid item
auto : indicates automatic positioning, automatic span or default span is One
grid-column-startThe / grid-row-startattribute indicates the starting position of the grid line of the grid item , and the grid-column-end/ grid-row-endattribute indicates the ending position of the grid line of the grid item.
.item:nth-child(2) {
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 2;
grid-row-end: 4;
background-color: #000000;
}
grid-column-start: 3; indicates that the grid item starts from the third column line. grid-column-end: 5; Indicates that the grid item ends from the fifth column line. So the width is 2 cells
grid-row-start: 2; indicates that the grid item starts from the second line. grid-row-end: 4; Indicates that the grid item ends from the fourth row. So the height is 2 cells
5.grid-column:
6.grid-row: short form of grid-column-start+ grid-column-end, and grid-row-start+ grid-row-endattributes respectively.
7.grid-area：
Attribute value :
<name>-the name you defined
<row-start> / <column-start> / <row-end> / <column-end>-can be a number or a named row
8.justify-self
Align the content in the grid item along the column axis (as opposed to the alignment along the row axis defined by the align-item property). This value applies to content in a single grid item.
Attribute value :
start : the content is aligned with the left
end of the grid area end : the content is aligned with the right end of the grid area
center : the content is in the middle of the grid area
stretch : the content width occupies the entire grid area space (default value)
9.align-self
Align the content in the grid item along the row axis (as opposed to the alignment along the row axis defined by the justify-item property). This value applies to content in a single grid item.
Attribute value :
start : the content is aligned with the left
end of the grid area end : the content is aligned with the right end of the grid area
center : the content is in the middle of the grid area
stretch : the content width occupies the entire grid area space (default value)