CSS GRID
বে-রঙ্গিন জীবন আর বে-রঙ্গিন ওয়েবসাইট কারোরি পছন্দের নয় । ওয়েব ডেভেলপমেন্টের সাথে যারা জড়িত তারা কম বেশি সকলে CSS সম্পর্কে জানেন । একটি ওয়েব সাইটের সাজু গুজু এর কাজে ব্যবহৃত হয় CSS (Cascading Style Sheets) । সেই সাজু গুজু কে আরোও জাস্ট লাইক এ ওয়াও করার একটি নিনজা টেকনিক হল CSS GRID . FLEX যেখানে এক ডাইমেনশনাল সেখানে GRID চাচ্চু ২ ডাইমেনশনাল । বুঝলেন না কিছু?? আহা !! কোনই সমস্যা নেই , আসুন একটু একটু বুঝার চেষ্টা করি ।
Flex কে আমরা Row বা Column , যে কোন একদিকে সাজাতে পারি । পক্ষান্তরে, GRID চাচ্চু কে আমরা একই সাথে Row এবং Column বরাবর সাজিয়ে থাকি । আসুন এবার একটু পাকাপক্ত কথায় আসা যাক । আহা! মামুর বেটা , GRID চাচ্চু যে আমাদের অপেক্ষায় বসে বসে ক্লান্ত — পরিশ্রান্ত । চলুন দেখা করে আসি তার সাথে একটু -
GRID COLUMN:
কেমন লাগিল বাহে GRID চাচ্চুক দেখিয়া? ফান্টাস্টিক নহে !!!
এখানে trygrid class বিশিষ্ট একটি div ব্যবহার করা হয়েছে । তার মধ্যে আরো তিনটি div ব্যবহার করা হয়েছে যাদের যথাক্রমে A,B এবং C নামে ডাকা হয়েছে ।
এখানে display কে grid করে দেওয়া হয়েছে । এবং grid-template-columns কে 1 fr ( fraction) করে দেওয়া হয়েছে । যাতে করে আমরা আগের ছবির সাথে কোন পার্থক্য করতে পারছি না। কিন্তু পরিবর্তন ঘটেছে ।
এখানে দেখেন , 1fr , 1fr ,2fr দেওয়া রয়েছে যার ফলে এখানে Columns বরাবর A element 1 fr জায়গা দখল করেছ। B for Ball ও ঠিক A এর সমান জায়গা পেয়েছে । কিন্তু , C মাম্মায় ২ বিঘা জায়গা মেরে দিয়েছে । বলুন তো, C মাম্মায় কি কাজ টা ঠিক করলো? আপনারা নিশ্চয় বলছেন , হালায় কামডা করলো কি !!! :P
Get Maruf Raihan’s stories in your inbox
Join Medium for free to get updates from this writer.
COLUMN GAP:
এখানে , 5px GAP ব্যবহার করা হয়েছে যাতে করে তাদের মাঝে জমি-জায়গা নিয়ে মারামারি- ঢিশুম ঢিশুম না হয়ে থাকে । এ তো গেল Column চাচ্চুর কাহিনি , সকল মজা তো সদ্য প্রেমে মজনু Row মাম্মার মাঝে রয়েছে । এবার তার আর জরিনার কাহিনি শুনে যান তাহলে,
Row মাম্মায় আবার নিজের ঘর থাইকা নিচের দিকে হামাগুড়ি খায় । এটা মনে রাখেন বাহে , সামনত কাজে দিবে ।
আয় হায়!! এ এক আস্ত মস্ত কান্ড ঘটে গেছে তো !!! A আর B মাম্মায় এবারেও 1fr জায়গা নিয়ে ফেলেছে এবং C মাম্মায় 2fr জায়গা নিয়ে ফেলেছে । এতে আমাদের কোন আপত্তি নেই । নেই তো?? নাহ নেই ।
এখানে কান্ড হচ্ছে যে , এখানে একটি 5px gap চলে এসেছে । তাই না?? হ্যাঁ , একদম ঠিক । দেখেন এখানে row বরাবর চলাফেরা হয়েছে । তাই , এটিতে grid-template-row : 1fr 1fr 2fr ব্যবহার করা হয়েছে । এবং মাঝে ৫ পিক্সেল এর একটি গ্যাপ রয়েছে ।
Youtube: www.youtube.com/@lwraihan
