টিএল; ডিআর
আপনি যদি ফ্লেক্সবক্সের সাথে পরিচিত হন তবে গ্রিডকে পরিচিত বোধ করা উচিত। র্যাচেল অ্যান্ড্রু আপনাকে শুরু করতে সাহায্য করার জন্য CSS গ্রিডের জন্য নিবেদিত একটি দুর্দান্ত ওয়েবসাইট বজায় রাখে। গ্রিড এখন Google Chrome-এ উপলব্ধ৷
ফ্লেক্সবক্স? গ্রিড?
বিগত কয়েক বছর ধরে, CSS Flexbox ব্যাপকভাবে ব্যবহৃত হয়ে উঠেছে এবং ব্রাউজার সমর্থন সত্যিই ভাল দেখাচ্ছে (যদি না আপনি IE9 এবং তার নিচের দরিদ্র আত্মাদের একজন হন)। ফ্লেক্সবক্স অনেক জটিল লেআউট কাজকে সহজ করে দিয়েছে, যেমন উপাদানগুলির মধ্যে সমান-দূরবর্তী ব্যবধান, টপ-টু-বটম লেআউট বা CSS উইজার্ডির পবিত্র গ্রেইল: উল্লম্ব কেন্দ্রীকরণ।
কিন্তু আফসোস, স্ক্রিনগুলির সাধারণত একটি দ্বিতীয় মাত্রা থাকে যা আমাদের চিন্তা করতে হবে। উপাদানগুলির আকার নির্ধারণের যত্ন নেওয়ার ক্ষেত্রে সংক্ষিপ্ত, দুঃখের বিষয়, আপনি একা ফ্লেক্সবক্স ব্যবহার করে উল্লম্ব এবং অনুভূমিক উভয় ছন্দ রাখতে পারবেন না। এখানেই CSS গ্রিড উদ্ধারে আসে।
সিএসএস গ্রিড 5 বছরেরও বেশি সময় ধরে বেশিরভাগ ব্রাউজারে একটি পতাকার পিছনে বিকাশে রয়েছে এবং ফ্লেক্সবক্সের মতো একটি বগি লঞ্চ এড়াতে ইন্টারঅপারেবিলিটির জন্য অতিরিক্ত সময় ব্যয় করা হয়েছে। সুতরাং আপনি যদি Chrome-এ আপনার লেআউট বাস্তবায়ন করতে গ্রিড ব্যবহার করেন, তাহলে আপনি ফায়ারফক্স এবং সাফারিতে একই ফলাফল পাবেন। লেখার সময়, গ্রিডের মাইক্রোসফ্টের এজ ইমপ্লিমেন্টেশন পুরানো হয়ে গেছে (যেমনটি ইতিমধ্যেই IE11 এ উপস্থিত ছিল।) এবং আপডেটটি " বিবেচনাধীন "।
ধারণা এবং সিনট্যাক্সের মিল থাকা সত্ত্বেও, ফ্লেক্সবক্স এবং গ্রিডকে প্রতিযোগী লেআউট কৌশল হিসাবে ভাববেন না। গ্রিড দুটি মাত্রায় সাজায়, যখন ফ্লেক্সবক্স একটিতে থাকে। দুটি একসাথে ব্যবহার করার সময় সমন্বয় আছে।
একটি গ্রিড সংজ্ঞায়িত করা
গ্রিডের স্বতন্ত্র বৈশিষ্ট্যের সাথে পরিচিত হওয়ার জন্য আমি আন্তরিকভাবে সুপারিশ করছি Rachel Andrew's Grid by Example বা CSS Tricks' Cheat Sheet । আপনি যদি ফ্লেক্সবক্সের সাথে পরিচিত হন তবে প্রচুর বৈশিষ্ট্য এবং তাদের অর্থ পরিচিত হওয়া উচিত।
আসুন একটি স্ট্যান্ডার্ড 12-কলামের গ্রিড লেআউটটি দেখে নেওয়া যাক। ক্লাসিক 12-কলাম লেআউট জনপ্রিয় কারণ 12 নম্বরটি 2, 3, 4 এবং 6 দ্বারা বিভাজ্য, এবং তাই অনেক ডিজাইনের জন্য উপযোগী। আসুন এই লেআউটটি বাস্তবায়ন করি:
আমাদের মার্কআপ কোড দিয়ে শুরু করা যাক:
<!DOCTYPE html>
<body>
<header></header>
<nav></nav>
<main></main>
<footer></footer>
</body>
আমাদের স্টাইলশীটে আমরা আমাদের body প্রসারিত করে শুরু করি যাতে এটি পুরো ভিউপোর্টকে কভার করে এবং এটিকে একটি গ্রিড পাত্রে পরিণত করে:
html, body {
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
}
body {
display: grid;
}
এখন আমরা CSS গ্রিড ব্যবহার করছি। হুররে!
পরবর্তী ধাপ হল আমাদের গ্রিডের সারি এবং কলাম বাস্তবায়ন করা। আমরা আমাদের মকআপে সমস্ত 12টি কলাম বাস্তবায়ন করতে পারি, কিন্তু যেহেতু আমরা প্রতিটি কলাম ব্যবহার করছি না, এটি করা আমাদের সিএসএসকে অপ্রয়োজনীয়ভাবে অগোছালো করে তুলবে। সরলতার জন্য, আমরা লেআউটটি এভাবে বাস্তবায়ন করব:
হেডার এবং ফুটার প্রস্থে পরিবর্তনশীল এবং বিষয়বস্তু উভয় মাত্রায় পরিবর্তনশীল। নেভিটি উভয় মাত্রাতেই পরিবর্তনশীল হবে, তবে আমরা এটির উপর ন্যূনতম 200px প্রস্থ আরোপ করতে যাচ্ছি। (কেন? অবশ্যই সিএসএস গ্রিডের বৈশিষ্ট্য দেখাতে।)
CSS গ্রিডে, কলাম এবং সারির সেটকে ট্র্যাক বলা হয়। আমাদের ট্র্যাকের প্রথম সেট, সারিগুলি সংজ্ঞায়িত করে শুরু করা যাক:
body {
display: grid;
grid-template-rows: 150px auto 100px;
}
grid-template-rows আকারের একটি ক্রম নেয় যা পৃথক সারিগুলিকে সংজ্ঞায়িত করে। এই ক্ষেত্রে, আমরা প্রথম সারির উচ্চতা 150px এবং শেষটি 100px দিই। মাঝের সারিটি auto সেট করা হয়েছে যার অর্থ এটি সেই সারিতে গ্রিড আইটেমগুলি ( গ্রিড কন্টেইনারের বাচ্চাদের) মিটমাট করার জন্য প্রয়োজনীয় উচ্চতার সাথে সামঞ্জস্য করবে৷ যেহেতু আমাদের শরীর পুরো ভিউপোর্ট জুড়ে প্রসারিত, তাই বিষয়বস্তু (উপরের ছবিতে হলুদ) ধারণকারী ট্র্যাক অন্তত সমস্ত উপলব্ধ স্থান পূরণ করবে, কিন্তু প্রয়োজন হলে তা বৃদ্ধি পাবে (এবং নথি স্ক্রোল করবে)।
কলামগুলির জন্য আমরা আরও গতিশীল পদ্ধতি নিতে চাই: আমরা চাই নেভি এবং বিষয়বস্তু উভয়ই বাড়ুক (এবং সঙ্কুচিত হোক), কিন্তু আমরা চাই nav কখনই 200px এর নিচে সঙ্কুচিত না হোক এবং আমরা চাই বিষয়বস্তু nav-এর চেয়ে বড় হোক। ফ্লেক্সবক্সে আমরা ফ্লেক্স-গ্রো এবং ফ্লেক্স-সঙ্কুচিত ব্যবহার করব, কিন্তু গ্রিডে এটি একটু ভিন্ন:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
}
আমরা 2টি কলাম সংজ্ঞায়িত করছি। প্রথম কলামটি minmax() ফাংশন ব্যবহার করে সংজ্ঞায়িত করা হয়, যা 2টি মান নেয়: সেই ট্র্যাকের সর্বনিম্ন এবং সর্বাধিক আকার। (এটি একটিতে min-width এবং max-width মতো।) সর্বনিম্ন প্রস্থ, যেমন আমরা আগে আলোচনা করেছি, 200px। সর্বাধিক প্রস্থ হল 3fr . fr একটি গ্রিড-নির্দিষ্ট ইউনিট যা আপনাকে গ্রিড উপাদানগুলিতে উপলব্ধ স্থান বিতরণ করতে দেয়। fr সম্ভবত "ভগ্নাংশ ইউনিট" এর জন্য দাঁড়ায়, কিন্তু শীঘ্রই বিনামূল্যে একক এর অর্থও হতে পারে । এখানে আমাদের মানগুলির মানে হল যে উভয় কলাম স্ক্রিন পূরণ করতে বৃদ্ধি পাবে, তবে বিষয়বস্তু কলাম সর্বদা এনএভি কলামের 3 গুণ প্রশস্ত হবে (যদি এনএভি কলাম 200px এর চেয়ে প্রশস্ত থাকে)।
যদিও আমাদের গ্রিড আইটেমগুলির প্লেসমেন্ট এখনও সঠিক নয়, সারি এবং কলামের আকার সঠিকভাবে আচরণ করে এবং আমরা যে আচরণের লক্ষ্য ছিলাম তা প্রদান করে:
আইটেম স্থাপন
গ্রিডের সবচেয়ে শক্তিশালী বৈশিষ্ট্যগুলির মধ্যে একটি হল DOM অর্ডার বিবেচনা না করে আইটেম স্থাপন করতে সক্ষম হওয়া। (যদিও, যেহেতু স্ক্রিন রিডাররা DOM নেভিগেট করে, তাই আমরা উচ্চতর সুপারিশ করি যে সঠিকভাবে অ্যাক্সেসযোগ্য হওয়ার জন্য আপনি কীভাবে উপাদানগুলিকে পুনর্বিন্যাস করেন সে সম্পর্কে আপনাকে মনে রাখতে হবে।) যদি কোনও ম্যানুয়াল প্লেসমেন্ট না করা হয়, তাহলে উপাদানগুলিকে DOM ক্রমে গ্রিডে রাখা হয়, বামে সাজানো হয় ডান এবং উপরে থেকে নীচে। প্রতিটি উপাদান একটি কোষ দখল করে। গ্রিডটি ভরাট করার ক্রমটি grid-auto-flow ব্যবহার করে পরিবর্তন করা যেতে পারে।
সুতরাং, আমরা কিভাবে উপাদান স্থাপন করব? তর্কাতীতভাবে গ্রিড আইটেম স্থাপন করার সবচেয়ে সহজ উপায় হল কোন কলাম এবং সারিগুলি তারা কভার করবে তা নির্ধারণ করে। গ্রিড এটি করার জন্য দুটি সিনট্যাক্স অফার করে: প্রথম সিনট্যাক্সে আপনি শুরু এবং শেষ বিন্দু সংজ্ঞায়িত করেন। দ্বিতীয়টিতে আপনি একটি স্টার্ট পয়েন্ট এবং একটি স্প্যান সংজ্ঞায়িত করেন:
header {
grid-column: 1 / 3;
}
nav {
grid-row: 2 / span 2;
}
আমরা চাই আমাদের হেডারটি প্রথম কলামে শুরু হোক এবং ৩য় কলামের আগে শেষ হোক। আমাদের নেভিটি দ্বিতীয় সারিতে শুরু হওয়া উচিত এবং মোট 2টি সারিতে বিস্তৃত হওয়া উচিত।
টেকনিক্যালি, আমরা আমাদের লেআউট বাস্তবায়ন সম্পন্ন করেছি, কিন্তু আমি আপনাকে কয়েকটি সুবিধার বৈশিষ্ট্য দেখাতে চাই যা গ্রিড আপনাকে প্লেসমেন্ট সহজ করার জন্য প্রদান করে। প্রথম বৈশিষ্ট্য হল যে আপনি আপনার ট্র্যাক সীমানাগুলির নাম দিতে পারেন এবং সেই নামগুলি বসানোর জন্য ব্যবহার করতে পারেন:
body {
display: grid;
grid-template-rows: 150px [nav-start] auto 100px [nav-end];
grid-template-columns: [header-start] minmax(200px, 3fr) 9fr [header-end];
}
header {
grid-column: header-start / header-end;
}
nav {
grid-row: nav-start / nav-end;
}
উপরের কোডটি আগের কোডের মতো একই লেআউট দেবে।
আরও শক্তিশালী হল আপনার গ্রিডে সমগ্র অঞ্চলের নামকরণের বৈশিষ্ট্য:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
grid-template-areas: "header header"
"nav content"
"nav footer";
}
header {
grid-area: header;
}
nav {
grid-area: nav;
}
grid-template-areas স্থান-বিচ্ছিন্ন নামের একটি স্ট্রিং নেয়, যা বিকাশকারীকে প্রতিটি কক্ষকে একটি নাম দেওয়ার অনুমতি দেয়। দুটি সংলগ্ন কক্ষের একই নাম থাকলে, তারা একই এলাকায় একত্রিত হতে চলেছে। এইভাবে আপনি আপনার লেআউট কোডে আরও শব্দার্থক প্রদান করতে পারেন এবং মিডিয়া প্রশ্নগুলিকে আরও স্বজ্ঞাত করে তুলতে পারেন৷ আবার, এই কোডটি আগের মতই লেআউট তৈরি করবে।
আরো আছে?
হ্যাঁ, হ্যাঁ, একটি একক ব্লগ পোস্টে কভার করার জন্য খুব বেশি উপায় আছে। র্যাচেল অ্যান্ড্রু , যিনি একজন জিডিইও , তিনি সিএসএস ওয়ার্কিং গ্রুপের একজন আমন্ত্রিত বিশেষজ্ঞ এবং গ্রিড ওয়েব ডিজাইনকে সহজ করে তোলে তা নিশ্চিত করার জন্য প্রথম থেকেই তাদের সাথে কাজ করে আসছে। এমনকি তিনি এটির উপর একটি বই লিখেছেন। তার ওয়েবসাইট Grid By Example হল গ্রিডের সাথে পরিচিত হওয়ার জন্য একটি মূল্যবান সম্পদ। অনেক লোক মনে করে যে গ্রিড ওয়েব ডিজাইনের জন্য একটি বিপ্লবী পদক্ষেপ এবং এটি এখন Chrome-এ ডিফল্টরূপে সক্ষম করা হয়েছে তাই আপনি আজই এটি ব্যবহার শুরু করতে পারেন৷