A Post Mortem Report About CSS Grid Layout !
CSS এ Grid View Layout কি?
CSS দিয়ে একটি ওয়েব পেজকে রো-কলামে বিভক্ত করে যে লে-আউট তৈরি করা হয়, তাকে CSS grid View Layout বলাহয়। এক্ষেত্রে এখানে কোনো রকম html table, CSS float এবং CSS Positioning ব্যবহার করা হয়না। ওয়েব পেজ ডিজাইনের সময় Grid ব্যবহার করা খুবই গুরুত্বপূর্ণ। এটি ওয়েব পেজের মধ্যে এলিমেন্ট গুলোকে সঠিক জায়গায় স্থাপন করা সহজ করে তোলে। Responsive Grid View তে অধিকাংশ সময় ১২ টি কলাম থাকে, ১২ টি কলাম মিলে এর মোট প্রস্থ হয় ১০০% এবং আপনি ব্রাউজারের আকার পরিবর্তন করার সাথে সাথে ইহা সংকুচিত ও প্রসারিত হবে।
CSS এ Grid View Layout তৈরির জন্য কি কি property ব্যবহৃত হয়?
CSS এ Grid View Layout তৈরির জন্য নিম্নের property এবং তাদের value ব্যবহৃত হয়।
display: gird/inline-grid
grid-template-columns: none | auto | max-content | min-content | length | initial | inherit;
grid-template-rows: none | auto | max-content | min-content | length | initial | inherit;
grid-row-start: auto | row-line;
grid-row-end: auto | row-line | span n;
grid-row: grid-row-start / grid-row-end;
grid-column-start: auto | span n | column-line;
grid-column-end: auto | span n | column-line;
grid-column: grid-column-start / grid-column-end;
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | item name;
grid-auto-rows: auto | max-content | min-content | length;
grid-auto-flow: row | column | dense | row dense | column dense;
grid-row-gap: length;
grid-column-gap: length;
grid-gap: grid-row-gap grid-column-gap;
grid-template: none | grid-template-rows / grid-template-columns | grid-template-areas | initial | inherit;
grid-template-areas: none | item names;
grid: none | grid-template-rows / grid-template-columns | grid-template-areas | grid-template-rows / [grid-auto-flow] grid-auto-columns | [grid-auto-flow] grid-auto-rows / grid-template-columns | initial | inherit;
grid-auto-columns: auto | max-content | min-content | length;
display: grid
html এর কোনো parent div block এর child div block গুলোকে grid আকারে প্রদর্শনের জন্য প্যারেন্ট
display: inline-grid;
CSS এ display: inline-grid; হুবহু display: grid এর মতোই কাজ করে , পার্থক্য হচ্ছে display: grid এর অধীনে
ব্যাখ্যা: যদি আপনি এই window টি ছোট অথবা বড় করেন, তাহলে display:grid এর আইটেম গুলোও ছোট এবং বড় হতে থাকবে। কিন্তু display: inline-grid; এর কোনো ধরণের পরিবর্তন আসবেনা।
grid এর মধ্যে কত গুলো column হবে , এবং প্রত্যেকটি column এর ডিফল্ট সাইজ কি হবে তা নির্ধারণ:
grid এর মধ্যে কত গুলো column হবে , এবং প্রত্যেকটি column এর ডিফল্ট সাইজ কি হবে, তা নির্ধারণের জন্য CSS 3 তেgrid-template-columns property ব্যবহৃত হয়।
grid এর মধ্যে প্রত্যেকটি row এর ডিফল্ট সাইজ কি হবে তা নির্ধারণ:
grid এর মধ্যে প্রত্যেকটি row এর ডিফল্ট সাইজ কি হবে তা নির্ধারণের জন্য CSS 3 তে grid-template-rows property ব্যবহৃত হয়।
কিভাবে grid এর row এর item গুলোর মধ্যে কোন নির্দিষ্ট Item দিয়ে row কে শুরু করবেন ?
grid এর মধ্যে row এর item গুলোর মধ্যে কোন নির্দিষ্ট Item বা কত নম্বর Item দিয়ে CSS এর row টি শুরু হবে তা নির্ধারণের জন্য CSS এরgrid-row-start property ব্যবহৃত হয়।
কিভাবে grid এর row এর item গুলোর মধ্যে কোন নির্দিষ্ট Item কে একাধিক row পর্যন্ত span বা বর্ধিত করবেন?
grid এর মধ্যে row এর item গুলোর মধ্যে কোন নির্দিষ্ট Item কে একাধিক row পর্যন্ত span বা বর্ধিত করার জন্য CSS এর grid-row-end property ব্যবহৃত হয়।
CSS grid-row-start, grid-row-end এই দুটি property এর কোনো short-hand property আছে?
জি আছে , এর জন্য আপনাকে grid-row property ব্যবহার করতে হবে। আর এটার syntax হচ্ছে ঠিক নিচের মতো :
grid-row: grid-row-start / grid-row-end;
grid এর row এর item গুলোকে কিভাবে কোনো নির্দিষ্ট column-line দিয়ে শুরু করবেন ?
grid এর row এর item গুলোকে একটা নির্দিষ্ট column-line দিয়ে শুরু করার জন্য CSS এর grid-column-start property ব্যবহৃত হয়।
কিভাবে grid এর নির্দিষ্ট column কে একাধিক column পর্যন্ত span বা বর্ধিত করবেন?
grid এর নির্দিষ্ট column কে একাধিক column পর্যন্ত span বা বর্ধিত করার জন্য CSS এরgrid-column-end property ব্যবহৃত হয়।
CSS grid-column-start, grid-column-end এই দুটি property এর কোনো short-hand property আছে?
জি আছে , এর জন্য আপনাকে grid-column property ব্যবহার করতে হবে। আর এটার syntax হচ্ছে ঠিক নিচের মতো :
grid-column: grid-column-start / grid-column-end;
grid layout এর মধ্যে area specify:
grid layout এর মধ্যে area specify করার জন্য CSS 3 তে grid-template-area property ব্যবহৃত হয়। আর grid-template-area এর সিনটেক্স ঠিক নিচের মতো :
grid-template-areas: none | item names;
grid এর মধ্যে প্রত্যেকটি Item এর নাম নির্ধারণ:
grid এর মধ্যে প্রত্যেকটি Item এর নাম নির্ধারণের জন্য CSS 3 তে grid-area property ব্যবহৃত হয়। তা ছাড়া CSS grid-row-start, grid-column-start, grid-row-end, grid-column-end এই চারটি property এর short-hand property হিসেবেও ব্যবহৃত হয়। আর grid-area এর সিনটেক্স ঠিক নিচের মতো :
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | item name;
CSS grid-row-start, grid-column-start, grid-row-end, grid-column-end এই চারটি property এর কোনো short-hand property আছে?
জি আছে , এর জন্য আপনাকে grid-area property ব্যবহার করতে হবে। আর এটার syntax হচ্ছে ঠিক নিচের মতো :
grid-row-start / grid-column-start / grid-row-end / grid-column-end.
grid এর মধ্যে row গুলোকে একটা default size প্রদান :
grid এর মধ্যে row গুলোকে একটা default size প্রদানের জন্য আপনাকে grid-auto-rows property টি ব্যবহার করতে হবে। এক্ষেত্রে যদি কখনো grid-template-rows property টি ব্যবহার করেন , সেটি grid-auto-rows property কে override করবে।
CSS এ grid এর মধ্যে item গুলো row আকারে হবে নাকি column আকারে হবে, তা কিভাবে নির্ধারণ করবেন ?
CSS এ grid এর মধ্যে item গুলো row আকারে হবে নাকি column আকারে হবে , তা নির্ধারণের জন্য css এ grid-auto-flow property ব্যবহৃত হয়।
grid এর প্রতিটি column এবং row এর মধ্যে Gap:
grid এর প্রতিটি column এবং row এর মধ্যে Gap দেওয়ার জন্য আপনি যথাক্রমে grid-column-gap এবংgrid-row-gap ব্যবহার করতে পারেন।
CSS grid-row-gap, grid-column-gapএই দুটি property এর কোনো short-hand property আছে?
জি আছে , এর জন্য আপনাকে grid-gap property ব্যবহার করতে হবে। আর এটার syntax হচ্ছে ঠিক নিচের মতো :
grid-gap: grid-row-gap / grid-column-gap;
এগুলো বার বার প্রাক্টিস করুন তাহলেই ক্লিয়ার হয়ে যাবে সব কিছুই।
আরো বিস্তারিত জানতে নিচের লিংক গুলোতে ভিজিট করতে পারেন।
Test your CSS Grid Skill here
https://developer.mozilla.org/.../Web/CSS/CSSGridLayout
Best Gird Example site YOU have ever seen !
এখানে গিয়ে নিজেই বিভিন্ন ভেলু চেঞ্জ করে ভার্চুয়ালি Grid Experiment করতে পারেন! আশা করি Grid এর পুরাটাই ক্লিয়ার করতে পারবেন!
https://alialaa.github.io/css-grid-cheat-sheet/
আরেকটা ভার্চুয়াল চার্টসিট এখানে গিয়ে দেখাতে পারেন!
শুভকামনা !
ধন্যবাদ...
হ্যাপি কোডিং