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
display:inline-block
, display:table-cell
, vertical-align
and settings of the container sub-elements (items) column-*
will be invalid.//= htmlentities($post["body"]); ?>