Grid Layout Notes
Declaration of grid layout
We can declare 'on elementsdisplay: grid 'or' display: inline-grid 'to create a grid container.Copy the code
The grid orbit
grid-template-columns
grid-template-rows
grid-template-columnsGrid-template-rows Sets the size of each rowCopy the code
fr
unit
Another unit of length, "FR", was introduced into the grid layout. Fr represents an equal portion of the available space in the grid container.Copy the code
repeat
function
If there are repeating parts in the grid layout, for example: {display: grid;
grid-template-columns: 30px 50px 50px 50px 40px; } here50pxRepeat many times, then you can use the function as follows: {display: grid;
grid-template-columns: 30px repeat(3.50px) 40px; } The function has2Two parameters: the above example represents, in all3Column, the space occupied by no column is zero50px.Copy the code
minmax
function
For example, if we want to give the grid a minimum size, we can use this function. { grid-template-columns: minmax(100px, auto); } this example represents the minimum that cannot be less than100px, the maximum isauto, adaptive.Copy the code
Place grid elements across tracks
grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column-start: 1; Represents the child element from the"1"Grid-column-end:3; Indicates that the child element is in the"3"End of line if this row doesn't have one3Columns are automatically created to the first column3Column grid - row - start:1; Represents the child element from the"1"Grid-row-end:3; Indicates that the child element is in the"3"Line ends if this line doesn't3Lines are automatically created to the first3Line lineCopy the code
The grid spacing
grid-column-gap
grid-row-gap
grid-column-gap: 10px; Represents the direct spacing of each column in the child element, in this case10px
grid-row-gap: 10px; Represents the direct spacing of each row in the child element, here is10px
Copy the code
z-index
Control level
Multiple grids can occupy the same grid unit. You can use z-index.Copy the code
Automatic filling of grid tracks
auto-fill
auto-fit
Create an effect similar to an elastic box, while ensuring that the content is arranged strictly according to fixed row and column rules.Copy the code
grid-column
和 grid-row
abbreviations
Grid-column-start and grid-column-end can be combined to grid-column. Grid-row-start and grid-row-end can be combined to grid-row. Grid-column:1 / 2;
grid-row: 1 / 4;
Copy the code
grid-area
attribute
Grid-area attributes are grid-row-start, grid-column-start, grid-row-end, grid-column-end. Grid-area attributes are grid-row-start, grid-column-start, grid-row-end, grid-column-end.1 / 1 / 4 / 2;
Copy the code
Short for grid spacing
Grid-gap: the first will be used for grid-row-gap and the second will be used for grid-gap -column-gap.Copy the code
Alignment of column axes
align-self
align-items
align-selfThe child element can be set separatelyalign-itemsSets the alignment of all elementsCopy the code
Alignment of row axes
justify-items
justify-self
Context-items can be set separately for child elements and context-self sets the alignment of all elementsCopy the code