Question

The the specifics what is the difference with grid vs grid area properties.

Answer 1

Grid:-

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

Grid Layout gives us a method of creating grid structures that are described in CSS and not in HTML. It helps us to create layouts that can be redefined using Media Queries and adapt to different contexts.

The grid property is a shorthand property for:

• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid-auto-rows
• grid-auto-columns
• grid-auto-flow

Grid area Property

A grid area is one or more grid cells that make up a rectangular area on the grid. Grid areas are created when you place an item using line-based placement or when defining areas using named grid areas.

The grid-area property can used to assign a name to a grid item. Named grid items can then be referenced to by the grid-template-areas property of the grid container

The grid-area property specifies a grid item's size and location in a grid layout, and is a shorthand property for the following properties:

• grid-row-start
• grid-column-start
• grid-row-end
• grid-column-end

*********************************************************************************************************************************

In case of any doubt do ask in the comment section.hope you like it