Make Notes from Youtube Videos
This is used to create layouts in our website.
Grid Line and Grid cell
One box in a grid is called a cell and the lines dividing the grid into individua boxes are grid lines.
Grid track and grid area
Grid track is the space between two grid lines and grid area is the space between any number of
cells.
06:53
07:13
Grid lines are numbered too according to a particular followed convention as shown in the above
screenshot.
The grid lines can also be named according to our wish if required, as shown in the second diagram
in the above snapshot.
09:51
The item in our container having the class item-4 is positioned using the above properties.
grid- row: start/ end;
grid- column: start/ end;
This way, it can be positioned anywhere in our grid.
10:16
Overlapping between item 1 and item 4 if item 1 is also sent to the same grid box as item 4.
The effect and the cause......
12:25
13:37
grid lines can also be renamed as per convenience.
The most used aspect of grid is covered till here.
Tareeka 2:
Using the grid area
16:52
19:00
19:08
Effect and the cause
fr unit:
1 fr 1fr 1fr ----> three fraction units i.e. 1 3rd.
24:21
24:24
The cause(Gap property) and the effect. Gap is used for padding and margin etc.
justify- items--- > align items horizontally in a grid box.
align- items ---> align items vertically in a grid box.
for individual items in a cell, we use align self and justify self.
27:45
To repeat a particular cell for a definite number of times.
28:18
minmax is used.
Justify and align content has to be covered still.
