1. What is a CSS grid?

Grid is a two-dimensional layout system that completely changes the way we design user interfaces. we used many methods but they missed out on many functions like (vertical centering, for instance). flexbox is also a very great layout tool, but it's a one-directional flow.

Grid is the very first CSS module created specifically to solve layout problems.

2.Properties-

(i)Display-

Display property will defines the element as a grid container and establishes a new grid formatting context for its contents.

Syntax-

 .container{
            display: grid;
        }

(ii)grid-template-columns/rows-

This property will define column and rows in the grid and If your definition contains repeating parts, you can use the repect().A fraction of the free space in the grid using the fr unit.

Syntax-

.container{
            display: grid;
            grid-template-columns:repeat(3, 1fr);
          }

example-

(iii)row-gap and column-gap-

This property will provides gap between grid row and grid column as input value.

Syntax-

.container{
            display: grid;
            column-gap: 100px;
            row-gap: 65px;
        }

example-

(iv)grid-column-start/end-

This property is used for where to a column and row starts or from where a column and row end.

syntax-

     #item1{
            grid-column-start: 1;
            grid-column-end: 3;
            }

example-