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

frunit

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

repeatfunction

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

minmaxfunction

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-indexControl 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-rowabbreviations

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-areaattribute

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