CSS GRID NOTES


1. Definition of CSS Grid


CSS Grid ek CSS layout system hai jo website ke elements ko rows aur columns mein arrange karne ke liye use hota hai. Iski help se hum responsive aur well-organized web layouts bana sakte hain.


Example:


.container { display: grid; }


1. display: grid;


Yeh kisi element ko Grid container banata hai.


.container { display: grid; }


2. grid-template-columns


Yeh define karta hai ke Grid mein kitne columns honge aur unka size kya hoga.


.container { display: grid; grid-template-columns: 200px 200px 200px; }


3. grid-template-rows


Yeh Grid ki rows ki height set karta hai.


.container { grid-template-rows: 100px 150px; }


4. gap


Yeh rows aur columns ke darmiyan space deta hai.


.container { gap: 20px; }


5. column-gap


Yeh columns ke darmiyan space set karta hai.


.container { column-gap: 15px; }


6. row-gap


Yeh rows ke darmiyan space set karta hai.


.container { row-gap: 10px; }


7. justify-items


Yeh Grid items ko horizontally align karta hai.


.container { justify-items: center; }


8. align-items


Yeh Grid items ko vertically align karta hai.


.container { align-items: center; }


9. grid-column


Yeh define karta hai ke koi item kitne columns mein spread hoga.


.item { grid-column: 1 / 3; }


10. grid-row


Yeh define karta hai ke koi item kitni rows mein spread hoga.


.item { grid-row: 1 / 3; }


3. Difference Between CSS Grid and Flexbox


CSS Grid CSS Flexbox
It is a two-dimensional layout system. It is a one-dimensional layout system.
It works with rows and columns. It works in a row or a column.
It is useful for complex website layouts. It is useful for navigation bars and aligning items.
It uses display: grid; It uses display: flex;
It controls layout in two dimensions. It mainly controls layout in one dimension.

EXAMPLE :


4. Importance of CSS Grid

CSS Grid ki importance yeh hai:

  1. Easy Layout: Website ke elements ko rows aur columns mein easily arrange karta hai.
  2. Responsive Design: Different screen sizes ke liye layouts banana easy hota hai.
  3. Less Code: Complex layouts ko comparatively kam CSS code se banaya ja sakta hai.
  4. Better Alignment: Elements ko properly align aur space kar sakte hain.
  5. Flexible Design: Website ke different sections ko easily manage kar sakte hain.
  6. Clean Structure: Website ka layout organized aur professional dikhta hai.

5. Simple CSS Grid Example


div class "container"
div Box 1 /div
div Box 2 /div
div Box 3 /div
div Box 4 /div
/div


.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}

.container div {
background-color: pink;
padding: 20px;
text-align: center;
}


Explanation

Is example mein 4 boxes do columns mein arrange honge. repeat(2, 1fr) ka matlab hai 2 equal-size columns banana, aur gap: 10px; boxes ke darmiyan space dega.


Conclusion

CSS Grid ek powerful layout system hai jo rows aur columns ki help se website ko organized, responsive aur attractive banata hai. Grid aur Flexbox dono modern web development mein important hain.