short code of visual studio:
.item{item -$}*20
Grid Layout:
1. grid work 2 dimensions. Horizontal and Vertical.
2. display: grid (That is the default). If we add another CSS property like "grid-template-columns" that grid will work. otherwise, the grid properly will not work.
3. grid-template-columns: 200px; that means 1 column and width 200px.
4. grid-template-columns: 200px 100px; that means 1 column with 200px width and 2nd column with 100px width
5. grid-template-columns: repeat(); here repeat is function. 2 values we have to add in that repeat. otherwise, that repeat will not work.
6. grid-template-columns: repeat(2, 200px); that mean 2 time repeat and those 2 column will 200px width.
7. grid-template-columns: repeat(2, 200px) 100px; that mean 2 time repeat and 1st 2 columns will with 200px width and after that 100px one column will create.
8. grid-template-columns: repeat(2, 200px) 100px 150px; that mean 2 time repeat and 1st 2 columns will with 200px width and after that 100px one column will create and after that 150px one column will create.
9. grid-template-columns: repeat(3, 1fr); that means 3-time repeat and all space will equal divide by that 3 columns.
10. grid-template-columns: repeat(3, 1fr) 2fr; that means 3-time repeat and all space will equal divide by that 3 columns and after that 2fr space will take. if 1fr take 200px that mean 2fr will take 400px.
11. grid-template-columns: 200px auto 100px; that means 1 column with 200px width and 3rd column with 200px width and the rest of all space will take at middle auto.
Fr is a fractional unit and 1fr is for 1 part of the available space.
Grid properties:
1. parent properties
- grid-template-rows
- grid-template
- column-gap
- row-gap
- grid-gap
- justify-items
- align-items
- justify-content
- align-content
- place-items
- place-content
2. child properties:
- grid-column: start/end
- grid-row: start/end
- justify-self
- align-self
- place-self
0 comments:
Post a Comment