RESUME BUILDING : GRID CONTAINOR

GRID CONTAINOR:
is the container element where the property display with a value grid or the inline-grid is used for defining their direct children into a grid layout.

All direct child elements of a grid container automatically become grid items.

SYNTAX:

.gridbox {
    display: grid;
}

PROPERTIES OF GRID-CONTAINOR:

1. justify-content.
2. align-content.
3. align-items.
4. grid-template
5. grid-auto-rows(TBD).
6. grid-auto-columns(TBD).
7. grid-template-rows(TBD).
8. grid-template-columns(TBD).
9. place-content(TBD).

JUSTIFY-CONTENT:
is used to horizontally align the complete grid inside the container.

SYNTAX:

.grid-box {
    display: grid;
    justify-content: space-between;
}

PROPERTIES OF JUSTIFY-CONTENT:

1. space-between: Distributes the complete space equally, leaving no space at the beginning or end.
2. space-around: IT creates equal space at the beginning, between, and at the end.
3. space-evenly: Distributes the equal space at the beginning, between, and at the end.
4. initial(TBD).
5. inherit(TBD).

ALIGN-CONTENT:

• The align-content property changes the behavior of the flex-wrap property. It aligns flex lines.
• It is used to specify the alignment between the lines inside a flexible container.

SYNTAX:

align-content:center;

ALIGN-ITEMS:

• The align-items property in CSS is used to align flex items along the cross-axis within a flex container.
• It accepts values like flex-start, flex-end, center, baseline, and stretch, controlling the vertical alignment of items in a flexbox.

SYNTAX:

align-items: normal;

GRID-TEMPLATE:
is a shorthand property for defining grid columns, rows, and areas.

SYNTAX:

grid-template: none;