The grid template (Grid-template) attribute and its general notation (longhands) define a fixed number of tracks that form an explicit mesh.
When grid items are positioned outside these boundaries, the grid container generates an implicit grid track by increasing the implicit grid lines.
These implicit and explicit grid lines together form an implicit grid (implicit grid).
The dimensions of an implicit mesh track are determined by the grid automatic row (grid-auto-rows) and Grid automatic column (Grid-auto-columns) properties.
The grid automatic flow (Grid-auto-flow) property is used to control the automatic positioning (auto-placement) of grid items with no explicit position,
Once the explicit mesh is filled (or, if there is no explicit mesh), auto-placement will also result in the generation of an implicit mesh track.
Automatic generation of row and column dimensions: Grid-auto-rows and Grid-auto-columns Properties
If a grid item is placed in a row or column that is not explicitly defined, the implicit grid track is created to accommodate it. This can happen in two cases: by explicitly locating to an out-of-range row or column, or by creating additional rows or columns by an auto-positioning algorithm. Grid automatic column and grid auto-row properties are used to specify the size of such an implicitly created track.
We still learn the use of this property by example:
#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;}
<div id= "Grid" > <div id= "A" >A</div> <div id= "B" >B</div> <div id= "C" >C</div></div>
If a grid item is placed in a row or column that is not explicitly defined, the implicit grid track is created to accommodate it. This can happen in two cases: by explicitly locating to an out-of-range row or column, or by creating additional rows or columns by an auto-positioning algorithm. Grid automatic column and grid auto-row properties are used to specify the size of such an implicitly created track.
The example above demonstrates the use of an implicit grid track. In this case, we created 2 rows and 5 columns, which explicitly declared only the 1th row/1th column, except for 1 hidden rows and 4 hidden columns. Grid item B is in Grid line 5, which automatically creates 4 implicit grid columns, but because there are no grid items in columns 3 and 4, its width collapses to 0.
You can test it yourself by using an online instance. (Please open with chrome)Note: Since the grid layout is the W3 specification in development, the browser is not fully supported and is currently supported by Chrome. Automatic layout: Grid automatic flow (Grid-auto-flow) Properties
Grid items that do not explicitly specify a location are automatically placed in the unoccupied space of the grid container through the automatic positioning algorithm. Grid automatic flow is used to control how the automatic layout algorithm works, and specifies how to put the grid items of the automatic layout into the grid.
Row
The automatic layout algorithm populates the grid items sequentially into each row, adding new rows if necessary. This is the default value for Grid-auto-flow.
column
The automatic layout algorithm populates the grid items sequentially into each column, adding new columns if necessary.
Dense
If dense is specified, a "dense" fill algorithm is used, which attempts to fill the smaller grid items that are in the back to the void left by the "Big Head" grid, just as we plug items in the car trunk. This may result in a different fill order and code order.
If not specified, the sparse fill algorithm is used, but is placed in order and does not retrace the blanks. This ensures that all grid items remain in the original code sequence, but there is a chance that page space waste may occur.
In the same way we learn through online examples. Where the code comments have been made clear, there is no repetition here.
by Iefreer
CSS3 Grid Layout Basics-Implicit grid automatic layout (grid-auto-rows/grid-auto-columns/grid-auto-flow)
