Ruan Yifeng teacher wrote grid layout is very good

A grid box generates a GRID formatting context (GFC), and its direct children generate a Block formatting context (BFC)

About Formatting context

Note that Grid layout is very powerful, please use it, especially involving two-dimensional layout, compatibility except IE, most browsers are compatible, mobile compatibility is better

Advantages:

  • It has all the flex layouts, but one-dimensional layouts are more powerful than Flex
  • Very flexible and adaptive
  • You can use row numbers, column numbers, and grid region names to locate elements. Net extra elements can also be placed according to the row number, column number

Container attribute

Display :grid/inline-grid can set the grid layout, one is block level, Grid-template-rows :repeat(3,100px) 100px === 100px 100px 100px 100px 100px Grid-template-columns :repeat(3,100px) If grid-template-columns:repeat(3,100px) if grid-template-columns:repeat(3,100px) if grid-template-columns:repeat(3,100px) if grid-template-columns:repeat(3,100px) if grid-template-columns:repeat(3,100px Grid-template-areas (100px high) :'a b C ''d e F ' 'g h I '(areas); Grid-column-gap :10px Grid-row-gap :10px Grid-row-gap :10px grid-row-gap:10px Grid-gap: <grid-row-gap> <grid-column-gap>; If only one value is entered, the default is that the second value is equal to the first value. Set cell alignment to multiple boxes Ditto values start | | end center | stretch (default) set up the entire content area inside the container alignment and align the justify - content horizontal vertical direction to place the content - content merge shorthand, Ditto values start | | end center | stretch | space - around | space - between | space - evenly; The most exciting is the Space-instituted, which is evenly spaced between projects and the item and container border. It is better than space-around to add a direct child element to a box that has grid columns and width set. It sets an initial height/width for boxes that have no row and column width set. Grid-auto-columns 50px; grid-auto-rows 50px; grid-auto-flow 50px; The default value for column row is "first column after column" and we can also add a supplementary dense attribute like grid-Auto-flow: Row dense which is that as long as there is space above the row, the elements below the dense will come up, which has the advantage of being more compact, For example, when displaying the number of "likes" in the circle of friends, regardless of the order of "likes", the length of the name will be different, which will affect our layout. We can use row dense name length, in the bottom line, the remaining space will be able to fit. Grid-template is a combination of grid-template-columns, grid-template-rows, and grid-template-areas and is not recommended Grid attributes are grid-template-rows, grid-template-columns, grid-template-columns, and areas. Grid-auto-rows, grid-auto-columns, and grid-auto-flow are not recommendedCopy the code

Subitem attributes

There’s one more grid line than the content, like a 3 by 3 grid, so you need 4 columns, 4 lines to enclose all the squares. That corresponds to the lines in each cell

Grid-column-start Vertical grid line where the left frame is located grid-column-end Vertical grid line where the right frame is located grid-row-start Horizontal grid line where the upper frame is located grid-row-end Horizontal grid line where the lower frame is located Number of values grid-column-start: 2; grid-column-end: 4; grid-row-start:2; Grid-row-start :4 Start the current item from row 2 and end it from row 2 and end it from row 2 For example, grid-column-start:span 2. Grid-column is a combination of grid-column-start and grid-column-end separated by a slash grid-column: <start-line> / <end-line>; Grid-row grid-row-start: <start-line> / <end-line>; grid-row: <start-line> / <end-line>; Grid-area specifies which area the project is placed in. Attribute set of content of cells horizontally (left to right), only applies to a single box the justify - self align - self values start | | end center | stretch; Place-self: <align-self> <justify-self> place-self: <align-self>Copy the code

Byte interview questions

Using the Grid layout, align the left two elements to the left and the right two elements to the right

This problem, no HTML structure, understanding ambiguity, find the original problem to fill

If you don’t understand anything, or if there are any inadequacies or mistakes in my article, please point them out in the comments section. Thank you for reading.