The properties of the Grid layout are divided into two categories.
Container properties and item properties. Properties define on grid container is known as container properties, while properties defined on grid item is known as item properties. First, let's discuss on Container properties.
CSS Grid: display attribute
display: grid Specifies a container to use a grid layout.
div {
display: grid;
}
The picture above is display: grid
By default, container elements are block-level elements, but they can also be set as inline elements.
div {
display: inline-grid;
}
The above code specifies div an inline element, which adopts a grid layout inside.
The picture above is display: inline-grid
Note that after the grid layout is set,
display:inline-block, display:table-cell, vertical-align and settings of the container sub-elements (items) column-* will be invalid.
