coding180 icon
Coding180
CSS Grid Container property - Display

CSS Grid Container property - Display

Home > Tutorials > CSS > CSS Grid Layout


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;
}

css grid display

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.

css inline grid

The picture above is display: inline-grid

Note that after the grid layout is set, display:inline-blockdisplay:table-cellvertical-align and settings of the container sub-elements (items) column-* will be invalid.

 


user

Robort Gabriel

Lagos, Nigeria

Freelance Web Developer, Native Android Developer, and Coding Tutor.

Skills
  • UI / UX
  • JavaScript
  • Python
  • PHP
  • Kotlin
  • Java
  • Bootrap
  • Android
  • Laravel