Grid

display:grid
Make the container follow a grid layout
now you can use :
grid-tempalte-column: 100px 120px and grid-template-row: 100px 120px
the values are the size of the columns and rows in width and height respectively if there are n values then n columns/rows
You can write 1fr 1fr 1fr to write that fraction part for the 3 columns specified [ 1 fraction of the original width ].
shorthand for this is grid-temple-area: repeat(5,1fr) which repeats 1fr five times. we also have grid-temple-area: repeat(5,minmax(100px,1fr)) which describes values if the items would be resized .

grid-row property is used specify the start/end of the number of the grid line same for grid-column
The above are short-hand for grid-row-start grid-row-end , same for column
grid-template-row: [naurto] 100px [sasuke] 2100px - this is how you name the grid lines


  grid-temple-area:{ "nav nav nav nav"
"left-side article right-side"
"footer footer footer"
};

This set the areas i.e the cells with the names specified which can later be called within the items using grid-area
That is when you are writing the rules for a particular element add grid-area:&kt;name> to it , the name here would be the name you give in while defining the grid-template-area - which essentially links those both.

Instead of padding or margin use gap

You can use justify-items: center inside the display:grid as well so that the items are aligned center
This happens with the default flow-direction , and the align-item/content use the cross axis here as well, while
justify-item uses the main axis
Grid is highly customizable so you can use justify-self and align-self as well

Obvious: items: used for items , content: used for containers .
we can have a shorthand for align-content + justify-content , that is place-content
and place-items is shorthand for [ zenbu wa iwanai bakayaro ]

Next