সিএসএস গ্রিড

গ্রিড অ্যাপ্লাই করা হয় সিএসএস প্রপার্টি display দিয়ে

display: grid;

যে ইলিমেন্ট এ গ্রিড প্রপার্টি অ্যাপ্লাই করা হয় সেটা গ্রিড কন্টেইনার। কন্টেইনারে অ্যাপ্লাই করা যাবে এমন সিএসএস প্রপার্টিগুলো কন্টেইনার দিয়ে চিহ্নিত করা হয়েছে

কন্টেইনার

কন্টেইনারের ভিতরের চিলড্রেন ইলিমেন্টকে গ্রিড আইটেম হিসেবে ধরা হয়। চিলড্রেনে অ্যাপ্লাই করা যাবে এমন সিএসএস প্রপার্টিগুলো চিলড্রেন দিয়ে চিহ্নিত করা হয়েছে

চিলড্রেন

গ্রিডের কলাম ডিফাইন করা

grid-template-columns: <লম্বা(%,fr,px)> ... | <নাম> <লম্বা(%,fr,px)> ...;

গ্রিড কলাম উদাহরণ(পিক্সেল দিয়ে)

grid-template-columns: 12px 12px 12px;

গ্রিড কলাম উদাহরণ(ফাংশন দিয়ে)

grid-template-columns: repeat(3, 12px);

গ্রিড কলাম উদাহরণ(অটো)

grid-template-columns: 8px auto 8px;

গ্রিড কলাম উদাহরণ(পার্সেন্টিজ)

grid-template-columns: 22% 22% auto;

সারিতে ফাঁকা জায়গা

grid-row-gap: 1px;

কলামে ফাঁকা জায়গা

grid-column-gap: 9px;

দুইটা শর্টকাটে

grid-gap: 1px 9px;

একই জায়গা সারি ও কলামে শর্টকাটে

grid-gap: 6px;

শুরুর দিকে অ্যালাইনমেন্ট সেট করা

align-items: start;

শেষের দিকে অ্যালাইনমেন্ট সেট করা

align-items: end;

মাঝখানে অ্যালাইনমেন্ট সেট করা

align-items: center;

(ডিফল্ট) ছড়িয়ে দেওয়া

align-items: stretch;

শুরুর দিকে সেট করা

align-content: start;

শেষের দিকে সেট করা

align-content: end;

মাঝখানে সেট করা

align-content: center;

ছড়িয়ে দেওয়া

align-content: stretch;

আইটেমের চারদিকে স্পেস ছড়িয়ে দেওয়া

align-content: space-around;

আইটেমের মধ্যবর্তী স্পেস ছড়িয়ে দেওয়া

align-content: space-between;

আইটেমের মধ্যে সমান্তরালভাবে স্পেস ছড়িয়ে দেওয়া

align-content: space-evenly;

কলামের শুরু সেট করা

grid-column-start: 1;

কলামের শেষ সেট করা

grid-column-end: 3;

কলামের ব্যপ্তি সেট করা

grid-column-start: span 3;

শর্টকাটে

grid-column: 2 / 3

ব্যপ্তিসহ শর্টকাটে

grid-column: 2 / span 2

শুরুর দিকে

justify-self: start;

শেষের দিকে

justify-self: end;

মাঝখানে

justify-self: center;

(ডিফল্ট) ছড়িয়ে দেওয়া

justify-self: stretch;

ব্লক লেভেল গ্রিড

display: grid;

ইনলাইন লেভেল গ্রিড

display: inline-grid;

সাব-গ্রিড

display: subgrid;

গ্রিডের সারি ডিফাইন করা

grid-template-rows: <লম্বা(%,fr,px)> ... | <নাম> <লম্বা(%,fr,px)> ...;

গ্রিড সারি উদাহরণ(পিক্সেল দিয়ে)

grid-template-rows: 12px 12px 12px;

গ্রিড সারি উদাহরণ(ফাংশন দিয়ে)

grid-template-rows: repeat(3, 12px);

গ্রিড সারি উদাহরণ(অটো)

grid-template-rows: 8px auto 8px;

গ্রিড সারি উদাহরণ(পার্সেন্টিজ)

grid-template-rows: 22% 22% auto;

শুরুতে অ্যালাইনমেন্ট সেট করা

justify-items: start;

শেষের দিকে অ্যালাইনমেন্ট সেট করা

justify-items: end;

মাঝখানে অ্যালাইনমেন্ট সেট করা

justify-items: center;

ছড়িয়ে দেওয়া (ডিফল্ট)

justify-items: stretch;

শুরুর দিকে সেট করা

justify-content: start;

শেষের দিকে সেট করা

justify-content: end;

মাঝখানে সেট করা

justify-content: center;

ছড়িয়ে দেওয়া

justify-content: stretch;

আইটেমের চারদিকে স্পেস ছড়িয়ে দেওয়া

justify-content: space-around;

আইটেমের মধ্যবর্তী স্পেস ছড়িয়ে দেওয়া

justify-content: space-between;

আইটেমের মধ্যে সমান্তরালভাবে স্পেস ছড়িয়ে দেওয়া

justify-content: space-evenly;

প্রত্যেকটা সারি পূর্ণ করে আইটেম রাখা

#grid-auto-flow: row;

প্রত্যেকটা কলাম পূর্ণ করে আইটেম রাখা

grid-auto-flow: column;

ডেন্স প্যাকিং অ্যালগরিদম ব্যবহার করে ছোটো আইটেম থাকা সত্ত্বেও বড় আইটেমের কারণে সৃষ্ট ফাঁকা যায়গা অর্ডার ভেঙ্গে ভরাট করা

grid-auto-flow: dense;

সারির শুরু সেট করা

grid-row-start: 1;

সারির শেষ সেট করা

grid-row-end: 3;

সারির ব্যপ্তি সেট করা

grid-row-start: span 3;

শর্টকাট

grid-row: 1 / 3;

ব্যপ্তিসহ শর্টকাট

grid-row: 1 / span 3;

শুরুর দিকে

align-self: start;

শেষের দিকে

align-self: end;

মাঝখানে

align-self: center;

(ডিফল্ট) ছড়িয়ে দেওয়া

align-self: stretch;