CSS দিয়ে পারফেক্ট রেসপন্সিভ গ্রিড বানানোর কৌশল

রেসপন্সিভ গ্রিড বানানো জানা ওয়েব ডেভেলপমেন্টের অপরিহার্য অংশ। ফটোগ্রাফারের পোর্টফোলিও, ই-কমার্স সাইট, বা ল্যান্ডিং পেজ—সব গ্রিড লেআউটের ওপর ভিত্তি করে। গ্রিড সব জায়গায়। ভালো রেসপন্সিভ গ্রিড লেআউট বানানো জানলে ফ্রন্ট-এন্ড ওয়েব ডেভেলপার হিসেবে আপনি সাথে সাথে আলাদা দেখাবেন।

গ্রিড লেআউট কী সেটা দ্রুত জানি:

গ্রিড লেআউট কী?

গ্রিড ভিজুয়াল এলিমেন্ট মিডিয়ায় অর্গানাইজ করার একটি প্রমাণিত পদ্ধতি। ডিজাইনাররা প্রিন্ট নিউজপেপার ও বিজ্ঞাপনের जमाने থেকে গ্রিড ব্যবহার করছেন। গ্রিড ব্যবহার করে এস্থেটিক্যালি প্লিজিং কমপোজিশন তৈরি হয় যা ব্রেইন সহজে বুঝতে পারে। তাই ওয়েবসাইটে গ্রিড ব্যবহার করা উচিত।

গ্রিড ডিজাইন এরিয়াকে কলামে ভাগ করে। কলামের মাঝপথে স্পেস বা গাটার থাকে। সাধারণত ১২ কলাম ব্যবহার করা হয় কারণ ২ বা ৩ দিয়ে ভাগ করা যায়। StudioPress ওয়েবসাইট থিমে এই প্র্যাকটিস দেখতে পাবেন।

CSS দিয়ে পারফেক্ট রেসপন্সিভ গ্রিড বানানোর কৌশল

কলামগুলো সমান প্রস্থের হতে হয় না। কিছু কলাম ২, ৪, ৬ বা আরও স্প্যান করতে পারে। শর্ত: পেজের সব এলিমেন্ট কলামের শুরু ও শেষে আলাইনড থাকতে হবে। ভার্টিকালি আলাদা জোনে ভাগ করে প্রতিটি জোনের কলাম প্রস্থ ভিন্ন রাখা যায়। একটু জটিল লাগলেও নয়, বেসিক্স জানলে সহজ।

রেসপন্সিভ গ্রিড তৈরির পদ্ধতিসমূহ

요즘 ফ্লেক্সবক্স ও CSS গ্রিড লেআউট নিয়ে অনেক কথা বলা হয়। এগুলো আসার আগে CSS float প্রপার্টি ব্যবহার করতে হতো। ফ্লোটেড কলাম এলিমেন্ট, পার্সেন্টেজ উইডথ, মিডিয়া কোয়েরি মিক্স করে গ্রিড বানাত। (এবং ফ্লোট গ্রিডের আগে HTML টেবিল একমাত্র অপশন ছিল। সেটা কথা বলি না 😉 )

ফ্রন্ট-এন্ড শিখতে আমি Zurb Foundation রেসপন্সিভ ফ্রেমওয়ার্ক দিয়ে শুরু করলাম। অনেকেই Bootstrap ব্যবহার করেন। ফ্রেমওয়ার্ক ওয়েবসাইট বানানো সহজ করে, টাইম বাঁচায়। কিন্তু অতিরিক্ত নির্ভরতা ভালো নয়, বিশেষ করে যদি আপনি না জানেন আন্ডারলাইন স্কাফফোল্ডিং কীভাবে কাজ করে। ফ্রেমওয়ার্কের हुडের নিচে কীভাবে কাজ করে সেটি বুঝতে চেষ্টা করুন। এটি কঠিন হলেও CSS প্রিন্সিপল বুঝতে সাহায্য করে। নিচের লাইন: এটি আপনাকে ভালো ওয়েব ডেভেলপার বানাবে।

আমাদের মিনি-প্রজেক্ট

আমরা একটি সিম্পল ২-কলাম গ্রিড তিনটি মেথডে বানাব: float, flexbox, CSS grid layout। কোড স্নিপেট ও গ্রাফিক্স দিয়ে প্রতিটি ধাপ ব্যাখ্যা করব।

গ্রিড প্ল্যানিং

আমাদের গ্রিড: একটি বেসিক টু-কলাম গ্রিড। মেইন কন্টেন্ট এরিয়া ও সাইডবার—অনেক ওয়েবসাইট ডিজাইনের মতো। রেসপন্সিভ ডিজাইন প্ল্যান করি: কিভাবে ডেস্কটপ, ট্যাবলেট, মোবাইলে দেখাবে। নোটস: মোবাইল: কলামগুলো স্ট্যাকড, মেইন উপরে, সাইডবার নিচে, দুটোই ১০০% প্রস্থ। ট্যাবলেট: সাইড বাই সাইড, প্রতিটি ৫০% প্রস্থ। ডেস্কটপ: মেইন ২/৩ প্রস্থ, সাইডবার ১/৩ প্রস্থ। প্রতিটি ব্রেকপয়েন্টে গ্রিড কেমন見える:

CSS দিয়ে পারফেক্ট রেসপন্সিভ গ্রিড বানানোর কৌশল

একটু এক্সট্রা ওয়ার্ক আগে, কিন্তু টাইম বাঁচাবে কারণ কী বানাতে হবে সেটি জানা থাকে। বড় প্রজেক্টে খুব উপকারী।

Float Grid

ফ্লেক্সবক্স ও CSS গ্রিড আসার পরও ফ্লোট গ্রিড কেন? পুরনো IE ব্রাউজারের জন্য এজ কেসে দরকার পড়তে পারে। CSS float প্রপার্টি মূলত টেক্সটকে ইমেজের চারপাশে ফ্লো করানোর জন্য ছিল। ইমেজে float: left দিলে পেরেন্ট এলিমেন্টের বামে আলাইন হয়।

CSS দিয়ে পারফেক্ট রেসপন্সিভ গ্রিড বানানোর কৌশল

ফ্লোট দিয়ে গ্রিড বানানো

মাল্টিপল এলিমেন্টে float প্রপার্টি দিয়ে সবকে একদিকেই আলাইন করানো যায়।

.column { display: block; float: left; }

সহজ লাগছে? কিন্তু ফ্লোট এলিমেন্টকে নরমাল ডকুমেন্ট ফ্লো থেকে বের করে দেয়। নীল ফ্লোটেড কলামগুলো নরমাল ফ্লো থেকে বের হলে গ্রে পেরেন্ট div চাইল্ড নাই বলে কোল্যাপ্স হয়ে যাবে।

CSS দিয়ে পারফেক্ট রেসপন্সিভ গ্রিড বানানোর কৌশল

এটা ফিক্স করার দুটি উপায়: পেরেন্টে display: table বা :after pseudo-element দিয়ে clear: both। প্যাডিং ও মার্জিন ব্যবহার করলে (যা সবসময়ই) প্রতিটি এলিমেন্টে box-sizing: border-box সেট করতে হয়।

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

Chris Coyier-র ব্যাখ্যা খুব ভালো।

মিডিয়া কোয়েরি দিয়ে রেসপন্সিভ করা

মিডিয়া কোয়েরি দিয়ে নির্দিষ্ট ডিভাইস প্রস্থে নির্দিষ্ট লেআউট সেট করব। মোবাইল-ফার্স্ট অ্যাপ্রোച്ച: ডিফল্ট দুটি কলাম ১০০%।

.column { display: block; width: 100%; }

ট্যাবলেটে (min-width: 641px) ফ্লোট লেফ্ট, ৫০% প্রস্থ।

@media only screen and (min-width: 641px){ .column { width: 50%; float: left; } }

ডেস্কটপে (min-width: 1025px) মেইন ৬৬.৬৬%, সাইডবার ৩৩.৩৩%।

@media only screen and (min-width: 1025px){ .main { width: 66.66%; } .sidebar { width: 33.33%; } }

CodePen-এ লাইভ ডেমো:

See the Pen Float Grid by Jessica (@thecodercoder) on CodePen.

ফ্লোট খারাপ নয়, dlouго দিন একমাত্র অপশন ছিল। কিন্তু ফ্লেক্সবক্স দেখলে ফ্লোট কতটুকু hacky এবং ফ্লেক্সবক্স কতটুকু ইন্টুইটিভ সেটি বুঝবেন।

Flexbox Grid

ফ্লেক্সবক্স দিয়ে রেসপন্সিভ গ্রিড বানাতে একই HTML: পেরেন্ট div, দুটি চাইল্ড কলাম div। পেরেন্টে flexbox ডিক্লেয়ার:

.parent { display: flex; }

কলাম div-এ flex প্রপার্টি:

.column { flex: 1; }

flex: 1 মানে প্রতিটি কলাম অন্যের সমান প্রস্থ পাবে—রেশিওর মতো। প্রথম কলাম ডবল প্রস্থ চাইলে flex: 2, দ্বিতীয় flex: 1। ফ্লেক্সবক্স অটোমেটিক্যালি সমান ভাগ করে দেয়। ফ্লোট গ্রিডের CSS-এর সাথে তুলনা করলে ফ্লেক্সবক্স সিম্পলার।

ফ্লেক্স গ্রিড বানানো

মোবাইল-ফার্স্ট: মোবাইলে ফ্লেক্সবক্স লাগে না, কলাম ১০০% প্রস্থ (width: 100% বা ডিফল্ট block)। ট্যাবলেট: (min-width: 641px) পেরেন্টে display: flex, কলামে flex: 1।

@media only screen and (min-width: 641px){ .parent { display: flex; } .column { flex: 1; } }

ডেস্কটপ: (min-width: 1025px) মেইন ২/৩, সাইডবার ১/৩। মেইন flex: 2, সাইডবার flex: 1 (ট্যাবলেট থেকে থাকায় আর ডিক্লেয়ার লাগে না)।

@media only screen and (min-width: 1025px){ .main { flex: 2; } }

মেইন কন্টেন্ট সাইডবারের ডবল প্রস্থ হবে। দুই কলাম থাকায় মেইন ২/৩, সাইডবার ১/৩।

ফ্লেক্সবক্স পাওয়ারফুল ও ইন্টুইটিভ

ফ্লেক্সবক্স কতটুকু কম CSS দরকার এবং ফ্লোট গ্রিডের মতো একই গ্রিড বানায়। ফ্লেক্সবক্স জাস্ট works—ইন্টুইটিভ। CSS float-এ বছর ধরে লড়াই করার পর ফ্লেক্সবক্সের সহজতাই অবিশ্বাস্য। ফ্লেক্সবক্সের অ্যাডভান্সড প্রপার্টি: হরিজন্টাল/ভার্টিকাল এলাইন, সেন্টার বা এজে এক্সটেন্ড, ব্রেকপয়েন্টে অর্ডার চেঞ্জ। CSS Tricks ও Mozilla-র আর্টিকেল পড়ুন। CodePen:

See the Pen Flex Grid by Jessica (@thecodercoder) on CodePen.

ফ্লোট আর ব্যবহার করতে হবena, ছাড়া টেক্সট র‍্যাপ করানোর ছাড়া।

CSS Grid Layout

CSS গ্রিড গ্রিড বানানোর নয়তম মেথড। ফ্লেক্সবক্সের মতো কিন্তু ভিন্ন। Rachel Andrew (CSS গ্রিড এক্সপার্ট) অনুযায়ী দুটোর নিজস্ব শক্তি:

Flexbox — এক ডিরেকশনে (রো বা কলাম) এলিমেন্ট আরেঞ্জের জন্য উপযোগী।
CSS Grid — রো ও কলাম উভয় জড়িত আয়োজনার জন্য উপযোগী।

টিপিক্যাল ওয়েবসাইট লেআউট (হেডার, ফুটার, কন্টেন্ট, সাইডবার) এর জন্য CSS গ্রিড ফ্লেক্সবক্সের চেয়ে बेटার। আর্টিকেল পড়ুন। মুখ্য ড্রব্যাক: সকল ব্রাউজারে ইউনিভার্সালি সাপোর্টেড নয়। পুরনো Chrome, iOS Safari, Android সাপোর্ট করে না। IE/Edge স্পটি। CSS গ্রিড ব্যবহার করতে চাইলে: ফলব্যাক CSS দিন বা ফ্লেক্সবক্স ব্যবহার করে ব্রাউজার সাপোর্ট বাড়ার অপেক্ষা করুন।

CSS গ্রিড কীভাবে কাজ করে

ফ্লেক্সবক্সের মতো পেরেন্টে display property: display: grid। বড় পার্থক্য: চাইল্ড এলিমেন্টে না, পেরেন্টেই গ্রিড টেমপ্লেট সেট করি। grid-template-columns (কলামের জন্য), grid-template-rows (রোয়ের জন্য)। প্রতিটি চাইল্ডের জন্য length value। দুই কলামের জন্য:

.parent { display: grid; grid-template-columns: 1fr 1fr; }

"fr" একাই কী?

"fr" মানে fraction—একটি নতুন মেজারমেন্ট ইউনিট। এটি উপলব্ধ স্পেসের কতটুকু ফ্র্যাকশন প্রতিটি গ্রিড আইটেম নেবে সেটি বোঝায়। Flex নাম্বারের মতো রিলেটিভ উইডথ বোঝায়।

CSS গ্রিড বানানো

মোবাইল-ফার্স্ট: মোবাইলে স্ট্যাকড, CSS গ্রিড স্টাইল লাগে না। ট্যাবলেট: সমান প্রস্থের দুটি চাইল্ড।

.parent { display: grid; grid-template-columns: 1fr 1fr; }

ডেস্কটপ: মেইন ডবল প্রস্থ।

@media only screen and (min-width: 1025px){ .parent { grid-template-columns: 2fr 1fr; } }

কুল—কোনো গ্রিড স্টাইল চাইল্ডে দিতে হয়নি, শুধু পেরেন্টে!

CSS গ্রিড অবিশ্বাস্য পাওয়ারফুল

ফ্লেক্সবক্সের মতো CSS গ্রিডও আরও জটিল লেআউট বানাতে পারে। ভেরিয়িং উইডথ, হাইট, আয়োজনা। আমি শুধু поверхা ছুঁইয়েছি। আরো জানতে Rachel Andrew-র "Grid by Example" বা Mozilla-র "Basic concepts of grid layout" পড়ুন। CodePen:

See the Pen CSS grid by Jessica (@thecodercoder) on CodePen.

শেষ কথা

কোন মেথড বেস্ট? আমার মতে ফ্লেক্সবক্স বর্তমানে সেরা অপশন। যথেষ্ট ব্রাউজার সাপোর্ট, এফিশিয়েন্ট গ্রিড বানানোর উপায়। CSS গ্রিড দ্বারা পুরোপুরি রিপ্লেস হবে না, কারণ ফ্লেক্সবক্সের নিজস্ব শক্তি আছে যা CSS গ্রিডের সাথে ভালো কাজ করে। CSS গ্রিড এখনও ব্রাউজার সাপোর্ট বাড়াচ্ছে। কিন্তু এখন থেকেই শিখতে শুরু করুন। খুব দের নেই CSS গ্রিড ওয়েবসাইট লেআউট বানানোর ইন্ডাস্ট্রি স্ট্যান্ডার্ড হয়ে যাবে। ফেভারিট কী? ফ্লেক্সবক্স বা CSS গ্রিড শিখতে আটকে পড়েছেন? কমেন্ট করুন।