Scribd
Upload
8 views

CSS GRIDS

Uploaded by

quiltwcc
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

CSS GRIDS

Uploaded by

quiltwcc
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

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.

You might also like