Setting the property display value to grid or inline-grid creates a grid container, and all direct children of the container automatically become grid items.
grid : The grid items are arranged in rows, and the grid items take up the entire width of the container.
inline-grid : The grid items are arranged in rows, and the width of the grid items is determined by their own width.
Properties grid-template-rowsand grid-template-columnsare used to display the definition grid, which are used to define row and column tracks, respectively.
Units frare used to represent track size quotas, which represent the allocation of available space in proportion to the quota. When the unit fris mixed with other length units, frthe calculation is based on the remaining space after the other units are allocated.
grid { display: grid; grid-template-columns: 1fr 1fr 2fr； ｝
The function is minmax()used to define orbital min/max boundary values.
The function minmax()accepts two parameters: the first parameter represents the minimum track size, and the second parameter represents the maximum track size. The length value can be auto, which means that the track size can be stretched or contracted according to the content size.
In this example, the minimum height of the first row is set to 100px, but the maximum height is set to 100px, autowhich means that the row height can be stretched by more than 100px according to the content.
In this example, the maximum width of the first column is set to 50%, which means that its width cannot exceed 50% of the entire container width.
grid { display: grid; grid-template-rows: minmax(100px, auto); grid-template-columns: minmax(auto, 50%) 1fr 3em; ｝
The function is repeat()used to define repeated grid tracks, especially when there are multiple identical items.
The function repeat()accepts two parameters: the first parameter is the number of repetitions, and the second parameter is the track size.
grid { display: grid; grid-template-rows: repeat(4, 100px); grid-template-columns: repeat(3, 1fr); ｝
properties grid-column-gap and grid-row-gapare used to define grid gaps.
Grid gaps are only created between rows and columns, with no gaps between items and boundaries.
grid { display: grid; grid-row-gap: 20px; grid-column-gap: 5rem; ｝