CSS grid-area property

CSS grid-area

CSS grid-area property is a shorthand property, used to set the items size and location within the grid.

But using CSS grid , sub properties of an grid cannot be declared.

grid-area shorthand properties are,

  • grid-row-start : It is used to specify on which row the item must start displaying.
  • grid-column-start : It is used to specify on which column the item must start displaying.
  • grid-row-end : It is used to specify on how many rows the item must be spanned and on which row the item must stop displaying.
  • grid-column-end : It is used to specify on how many column the item must be spanned and on which column the item must stop displaying.

Example

Try Yourself

Explanation of the above output

Example explanation