Css Grid

Css Grid

Css grid helps us to place our content inside a grid type layout.

How to use-just use following code(for a parent div with class container) -

.container{
    display: grid;
}

PROPERTIES-

1.ROW AND COLUMN-We have to specify how many rows and columns we want in our grid. To do that use following code inside parent: E.g.-for a grid of 3 columns and 3 rows of 50px each:

grid-template-rows: 50px 50px 50px;
grid-template-columns: 50px 50px 50px;

2.GAP-This property is used for giving gap to rows and columns.E.g.-

row-gap: 10px;
column-gap: 10px;

3.COLUMN/ROW START/END-This property allows us to spread a particular children over more than one row/coluumn. E.g.-for a children with class- item,

.item{
    grid-column-start: 1;
    grid-column-end: 3;
}

4.JUSTIFY ITEMS-it is used to align items inside the parent horizontally. E.g.-

justify-items: center;

5.JUSTIFY SELF-it is used to align children horizontally.

justify-self: center;
}

6.ALIGN ITEMS-this property is used to align items inside the container vertically.

align-items: center;

7.ALIGN SELF-for aligning the children vertically.

align-self: flex-end;
}

8.PLACE ITEMS-aligns both vertically and horizontally.

place-items: center;