Modern Web Design Layout তৈরী করার জন্য খুব ই কার্যকরী একটি layout system হলো “CSS Grid”. এই জিনিসটা ভালভাবে জানলে এবং practice করলে, শুধুমাত্র Layout বানানোর জন্য আর কোন CSS Framework ব্যবহার করার প্রয়োজন পড়বেনা! এটা আরেকটি জনপ্রিয় Layout System - “CSS Flexbox” এর থেকে powerful কারণ এটার মাধ্যমে two-dimensional layout তৈরী করা সম্ভব মাত্র ২-১ লাইন CSS লিখে। এটার browser support ও যথেষ্ট ভাল। আমি মনে করি, একজন Front End Developer এবং Full Stack Web Developer এরও এটা ভাল করে জানা উচিৎ। তাহলে যেমন খুশি তেমন complex layout বানানো একেবারেই সহজ হয়ে যাবে।
Grid সিস্টেমে অবশ্যই একটা কন্টেইনার লাগবে প্যারেন্ট DIV হিসাবে । তার ভিতর কিছু এলিমেন্ট DIV থাকবে । আমাদেরকে প্রথমেই কন্টেইনার DIV কে স্টাইল করতে হবে ।
কয়টা Column বানাতে হবে সেটা উল্লেখ করে দিতে হবে grid-template-columns: 200px 200px 100px;
এখানে তিনটি মান দেয়া হয়েছে তাই তিনটি Column হবে ।
আমরা ROW বানাতে চাইলে grid-template-rows: 100px 100px ; এখানে দুটি মান দেয়া হয়েছে তাই দুটি ROW হবে ।
Grid এ ROW বা Column মাঝে গ্যাপ দিতে চাইলে grid-row-gap: 5px ; grid-column-gap: 3px ; এভাবে উল্লেখ করে দিতে হবে । কিন্তু প্রত্যেকের মাঝে যদি সমান গ্যাপ দিতে হয় ,তাহলে grid -gap: 3px উল্লেখ করতে হবে ।
আমরা যদি এখন Grid এ ROW বা Column কে রেস্পন্সিভ করতে চাই । তাহলে আমাদের কে আনুপাতিক হারে বলে দিতে হবে । এখন এখানে যদি বলা হয় প্রথম Column 1fr নিবে দ্বিতীয় Column 2fr নিবে । এখানে পুরো জায়গা কে ৩ ভাগ করে প্রথম Column কে ১ ভাগ এবং দ্বিতীয় Column কে ২ ভাগ দিবে ।
আমরা চাইলে এক লাইনে ROW এবং Column লিখতে পারি grid-template : 1fr 2fr / 1fr 2fr আগে ROW এর মান লিখতে হবে , পরে Column এর মান লিখতে হবে ।
একই জিনিস বার বার ব্যবহার করতে হলে repeat() দিয়ে করা যায় । grid-template-columns: repeat(3,1fr); এখানে ৩ টি কলাম 1fr করে রিপিট করতে বলা হয়েছে ।
Top comments (0)