An overview of the
Grid layouts are for two-dimensional layouts
The basic concept
- The outermost layer is the container, and the inner layer is the project. The project can only be the top child of the container, and does not contain the child elements of the project
- Row row column cross area Grid line n row is n+1 horizontal line M column is M +1 vertical grid line
Container attribute
- display: grid/inline-grid
- Grid-template-columns: 100px 100px 100px column width
- Grid-template-rows: repeat(3,33.33%) row height (auto-fill) (fr keyword) (minmax length range) (auto)
- Grid-row-gap Specifies the interval between rows. Grid-colum -gap Specifies the interval between columns
- Grid-template-areas: ‘a b c’ d e f ‘g h I’; Nine areas some areas do not need to use
- Grid-auto-flow: Colum columns first and then rows
- Context-items: horizontal position of the start/end/center/stretch cell content
- The align – items: the start/end/center/stretch cell content in the vertical position
- The justify – content: start/end/center/stretch/space – around/space – between/space – evenly overall content area in the horizontal position of the container
- Align-content: specifies the location of the entire content area
- Space-content: the last two abbreviations
- Grid-auto-columns: The column width and row height of an extra grid automatically created by the browser
- grid-auto-rows:
- Grid-template-columns /rows: same as above
The project properties
- Grid-column-start: the vertical grid line where the left border of 2 is located
- Grid-column-end: the vertical grid line with the right border
- Grid-row-start: horizontal grid line with the top border
- Grid-row-end: the horizontal grid line with the bottom border
- You can also use a span to represent a span
- Grid-column is short for merge
- grid-area
- The justify-self: start/end/center/stretch attribute sets the horizontal position of the cell content
- Align-self sets the vertical position of the cell content
- Short for place-self merge