grid grid layout
Grid grid layout
Overview
Grid is the most powerful CSS layout scheme.
It divides web pages into grids, and can combine different grids at will to make various layouts. In the past, effects that could only be achieved through complex CSS frameworks are now built into the browser.
The Grid layout is similar to the Flex layout, and both can specify the position of multiple items inside the container. However, they also have important differences.
Flex layout is an axis layout. You can only specify the position of the "item" for the axis, which can be regarded as a one-dimensional layout . Grid layout is to divide the container into "rows" and "columns", generate cells, and then specify the cell where the "item is located", which can be regarded as a two-dimensional layout . The Grid layout is far more powerful than the Flex layout.
basic concept
Containers and items
The area with grid layout is called "container". The sub-elements inside the container that are positioned by the grid are called "items".
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>Rows and Columns
The horizontal area inside the container is called "row" and the vertical area is called "column".
Cell
The intersection of rows and columns is called a "cell" (cell).
Under normal circumstances, nrows and mcolumns will produce n x ma cell. For example, 3 rows and 3 columns will produce 9 cells
Gridlines
The lines that divide the grid are called "grid lines". Horizontal grid lines divide rows, and vertical grid lines divide columns.
Under normal circumstances, a nrow has n + 1a horizontal grid line and a mcolumn has m + 1a vertical grid line. For example, there are four horizontal grid lines in three rows.
Container properties
display attribute(*)
grid
inline-grid
After the set grid layout, the container sub-elements (items) float, display: inline-block, display: table-cell, vertical-alignand column-*other settings are invalidated.
grid-template-columns property, grid-template-rows property(*)
After the container has specified the grid layout, it is then necessary to divide rows and columns. grid-template-columnsThe attribute defines the column width of each column, and the grid-template-rowsattribute defines the row height of each row.
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}In addition to using absolute units, percentages can also be used.
.container {
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;
}repeat()
.container {
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);
}repeat()Two parameters are accepted. The first parameter is the number of repetitions (3 in the example above), and the second parameter is the value to be repeated.
repeat()It is also possible to repeat a certain pattern.
grid-template-columns: repeat(2, 100px 20px 80px);auto-fill keyword
Sometimes, the size of the cell is fixed, but the size of the container is uncertain. If you want each row (or each column) to contain as many cells as possible, you can use auto-fillkeywords to indicate auto-fill.
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
}Indicates the width of each column 100px, and then automatically fills in until the container can't fit more columns.
fr keyword
In order to express the proportional relationship conveniently, the grid layout provides frkeywords (short for fraction, meaning "fragment"). If the widths of the two columns are 1frsum 2fr, it means that the latter is twice the former.
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}frIt can be combined with absolute length units, which is very convenient at this time.
.container {
display: grid;
grid-template-columns: 150px 1fr 2fr;
}minmax()
minmax()The function generates a range of lengths, indicating that the length is within this range. It accepts two parameters, minimum and maximum.
grid-template-columns: 100px 100px minmax(100px, auto);auto keyword
autoThe keyword means that the length is determined by the browser itself.
grid-template-columns: 100px auto 100px;The name of the grid line
grid-template-columnsIn attributes and grid-template-rowsattributes, square brackets can also be used to specify the name of each grid line for future reference.
.container {
display: grid;
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}The above code specifies that the grid layout is 3 rows x 3 columns, so there are 4 vertical grid lines and 4 horizontal grid lines. Inside the square brackets are the names of the eight wires in sequence.
The grid layout allows multiple names for the same line, for example [fifth-line row-5].
Layout example
grid-template-columnsProperties are very useful for web page layout. The two-column layout only requires one line of code.
.wrap {
display: grid;
grid-template-columns: 70% 30%;
}The above code sets the left column to 70% and the right column to 30%. The traditional Jiugongge layout is easy to write.
grid-template-columns: repeat(9, 1fr);grid-row-gap property, grid-column-gap property, grid-gap property(*)
grid-row-gapThe property sets the row-to-row spacing (row spacing), and the grid-column-gapproperty sets the column-to-column spacing (column spacing).
.container {
grid-row-gap: 20px;
grid-column-gap: 30px;
}grid-row-gapUsed to set the row spacing and grid-column-gapcolumn spacing.
grid-gapProperty is grid-column-gapand grid-row-gapthe merger shorthand syntax is as follows.
.container {
grid-gap: 20px 30px;
}If grid-gapthe second value is omitted, the browser considers the second value to be equal to the first value.
According to the latest standard, the grid-prefixes of the above three attribute names have been deleted, grid-column-gapand grid-row-gapwritten as column-gapsum row-gap, grid-gapwritten as gap.
grid-template-areas 属性
The grid layout allows to specify an "area", an area is composed of single or multiple cells. grid-template-areasAttributes are used to define the area.
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a b c'
'd e f'
'g h i';
}grid-auto-flow property
After the grid is divided, the child elements of the container will be automatically placed in each grid in order. The default placement order is "row first, column second", that is, fill the first row first, and then start to place the second row, which is the order of the numbers in the figure below.
The order is grid-auto-flowdetermined by the attributes, and the default value is row"row first, then column". It can also be set to column"column before row".
grid-auto-flow: column;It can also be set to row densesum column dense. These two values are mainly used for how to automatically place the remaining items after some items are assigned positions.
justify-items attribute, align-items attribute, place-items attribute(*)
justify-itemsThe property sets the horizontal position of the cell content (left, center, right), and the align-itemsproperty sets the vertical position of the cell content (top, middle, and bottom).
.container {
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
}The two attributes are written in exactly the same way, and you can take the following values.
start: Align the starting edge of the cell.
end: Align the end edge of the cell.
center: The center of the cell.
stretch: stretch to occupy the entire width of the cell (default value).
place-itemsAttribute is a combination of align-itemsattributes and justify-itemsattributes.
Below is an example.
place-items: start end;If the second value is omitted, the browser considers it to be equal to the first value.
justify-content attribute, align-content attribute, place-content attribute(*)
justify-contentThe attribute is the horizontal position of the entire content area in the container (left, center, right), and the align-contentattribute is the vertical position of the entire content area (top, middle, and bottom).
.container {
justify-content: start | end | center | space-around | space-between | space-evenly;
align-content: start | end | center | space-around | space-between | space-evenly;
}The two attributes are written in exactly the same way, and you can take the following values. (The following figures all take justify-contentattributes as examples. The align-contentattribute diagrams are exactly the same, except that the horizontal direction is changed to the vertical direction.)
place-contentAttribute is a combination of align-contentattributes and justify-contentattributes.
Below is an example.
place-content: space-around space-evenly;If the second value is omitted, the browser will assume that the second value is equal to the first value.
Project properties
grid-column-start property, grid-column-end property, grid-row-start property, grid-row-end property
The position of the item can be specified. The specific method is to specify the four borders of the item and which grid line to locate respectively.
grid-column-startProperty: the vertical grid line where the left border is located
grid-column-endProperty: the vertical grid line where the right border is located
grid-row-startProperty: the horizontal grid line where the top border is located
grid-row-endProperty: the horizontal grid line where the bottom border is located
.item-1 {
grid-column-start: 2;
grid-column-end: 4;
}
.item-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;
}The values of these four attributes can be specified as the name of the grid line in addition to the number of grid lines.
.item-1 {
grid-column-start: header-start;
grid-column-end: header-end;
}In the above code, the positions of the left and right borders are designated as the names of the grid lines.
The values of these four attributes can also use spankeywords to indicate "span", that is, how many grids span between the left and right borders (upper and lower borders).
.item-1 {
grid-column-start: span 2;
}Using these four attributes, if there is an overlap of items, use the z-indexattributes to specify the overlapping order of the items.
grid-column property, grid-row property(*)
grid-columnAttribute is the combined short form of grid-column-startsum, and attribute is grid-column-endthe combined short form grid-rowof grid-row-startattribute sum grid-row-end.
.item {
grid-column: / ;
grid-row: / ;
}Below is an example.
.item-1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}In the above code, the item item-1occupies the first row, from the first column line to the third column line.
Among these two attributes, spankeywords can also be used to indicate how many grids are spanned.
.item-1 {
background: #b03532;
grid-column: 1 / 3;
grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
background: #b03532;
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}grid-area property
grid-areaThe attribute specifies in which area the item is placed.
.item-1 {
grid-area: e;
}grid-areaProperties can also be used grid-row-start, grid-column-start, grid-row-end, grid-column-endcombined short form, which directly specifies the location of items.
.item {
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}Below is an example.
.item-1 {
grid-area: 1 / 1 / 3 / 3;
}
justify-self attribute, align-self attribute, place-self attribute
justify-selfThe attribute sets the horizontal position of the cell content (left, middle, right), which is justify-itemsexactly the same as the usage of the attribute, but only applies to a single item.
align-selfThe attribute setting the vertical position of the cell content (upper, middle and lower) is align-itemsexactly the same as the usage of the attribute, and only applies to a single item.
.item {
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
}Both attributes can take the following four values.
start: Align the starting edge of the cell.
end: Align the end edge of the cell.
center: The center of the cell.
stretch: stretch to occupy the entire width of the cell (default value).
The following is justify-self: startan example.
.item-1 {
justify-self: start;
}
place-selfAttribute is a combination of align-selfattributes and justify-selfattributes.
place-self: <align-self> <justify-self>;Below is an example.
place-self: center center;If the second value is omitted, the place-selfattribute will consider the two values to be equal.