CSS3 grid layout basic knowledge-Automatic grid layout (grid-auto-rows/grid-auto-columns/grid-auto-flow)
The grid-template attribute and its general syntax (longhands) define a fixed number of tracks to form an explicit grid.
When a grid project locates beyond these boundaries, the Grid container generates an implicit grid orbit by adding implicit gridlines.
These hidden and explicit gridlines form an implicit grid ).
The size of an implicit grid orbit is determined by the grid-auto-rows and grid-auto-columns attributes.
The grid-auto-flow attribute is used to control the auto-placement of grid items with no definite positions ),
Once an explicit grid is filled (or if no explicit grid exists), auto-placement will also generate an implicit grid orbit.
Auto-generated row and column sizes: grid-auto-rows and grid-auto-columns attributes
If a grid item is placed in a row or column with an unspecified size, an implicit grid track is created to accommodate it. This occurs in either case: explicitly locating a row or column out of the range, or creating additional rows or columns by the automatic locating algorithm. Automatic grid columns and automatic grid row attributes are used to specify the size of such an implicitly created track. We still use instances to learn the usage of this attribute:
#grid {
display: grid;
grid-template-columns: 20px;
grid-template-rows: 20px }
#A { grid-column: 1; grid-row: 1; }
#B { grid-column: 5; grid-row: 1 / span 2; }
#C { grid-column: 1 / span 2; grid-row: 2; }
ABC
If a grid item is placed in a row or column with an unspecified size, an implicit grid track is created to accommodate it. This occurs in either case: explicitly locating a row or column out of the range, or creating additional rows or columns by the automatic locating algorithm. Automatic grid columns and automatic grid row attributes are used to specify the size of such an implicitly created track.
The example above demonstrates the use of an implicit grid orbit. In this example, two rows and five columns are created, and only 1st rows and 1st columns are explicitly declared. In addition, one implicit row and four hidden columns exist. Grid item B is located in Grid line 5, which automatically creates four implicit grid columns, but its width is reduced to 0 because column 3 and column 4 do not have any grid items. You can test it on your own through an online instance. (Use Chrome to open it.) Note: Because the grid layout is a W3 specification, the browser does not yet fully support it. Currently, Chrome supports it. Automatic Layout: grid items with unspecified locations in the grid-auto-flow attribute are automatically placed in the unused space of the grid container using the automatic positioning algorithm. Automatic grid flow is used to control how the Automatic Layout Algorithm works, and to specify how to put the automatically layout grid items into the grid.
Row
The Automatic Layout Algorithm fills grid items in each row in order and adds new rows if necessary. This is the default value of grid-auto-flow.
Column
The Automatic Layout Algorithm fills grid items in order to each column and adds new columns if necessary.
Dense
If dense is specified, the "intensive" filling algorithm is used, which tries to fill the small mesh entry at the end of the list in the gaps left by the "Big Head" grid, it's like stuff in the trunk of a car. This may lead to different filling order and code order.
If this parameter is not specified, the "sparse" filling algorithm is used, which is placed in order without backtracing. This ensures that all grid items keep the original code order, but there may be a waste of page space. Similarly, we learn through online instances. The code comments have been clearly stated and are not repeated here.
