আজকের টিউটোরিয়ালে, আমরা HTML এবং CSS দিয়ে একটি টপ নেভিগেশন বার তৈরি করব। আমরা এটি তৈরির দুটি ভিন্ন পদ্ধতি দেখব: একটি ফ্লেক্সবক্স দিয়ে, আরেকটি CSS গ্রিড দিয়ে।
এটি দুটি পদ্ধতির পার্থক্য বুঝতে একটি ভাল উপায়। এবং আপনি দেখতে পাবেন কোন পদ্ধতি আপনাকে ভাল লাগে।
ফিনিশড নেভিগেশন কেমন দেখাবে:
ডেস্কটপে, সব লিংক একই সারিতে থাকবে, Home বামে, এবং অন্যান্য লিংক ডানে।
তারপর মোবাইলে, Home উপরের সারিতে থাকবে এবং অন্যান্য লিংক নিচের সারিতে। এবং লিংকগুলো পেজের মাঝখানে সেন্টার্ড থাকবে।
চলুন ফাইল সেট আপ দিয়ে শুরু করি।
ফাইল সেট আপ করুন
নেভিগেশন তৈরি করতে আমরা একটি index.html ফাইল এবং একটি style.scss ফাইল তৈরি করব, যা VS Code Live Sass এক্সটেনশন ব্যবহার করে style.css-এ কম্পাইল হবে।
আমাদের <head> সেকশনে আমরা style.css ফাইল লোড করার জন্য একটি <link> এলিমেন্ট যোগ করব।
এখন নেভিগেশন বার তৈরি শুরু করি!
HTML মার্কআপ তৈরি করুন
আমাদের index.html ফাইলে, নেভিগেশনের জন্য HTML মার্কআপ তৈরি করি। আমি যতদূর সম্ভব সেমান্টিক HTML ট্যাগ ব্যবহার করার চেষ্টা করি, শুধু div ব্যবহার না করে সব জায়গায়।
আমরা একটি <nav> এলিমেন্ট তৈরি করব, যাতে আমাদের সব নেভিগেশন লিংক থাকে। তারপর লিংকগুলো একটি আনঅর্ডার্ড লিস্ট <ul> এলিমেন্টে রাখব:
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav>এটি আমাদের শুরুতে বেসিক নেভিগেশন মার্কআপ। ফ্লেক্সবক্স এবং গ্রিড ভার্সন বানানোর সময় কিছু টুইক করতে হবে, কিন্তু আপনি এই <nav> এলিমেন্টের দুটি কপি তৈরি করে শুরু করতে পারেন।
index.html ব্রাউজারে লোড করলে এটি די বেসিক দেখাবে।
চিন্তা করবেন না! আমাদের style.scss ফাইলে স্টাইল যোগ করা শুরু করি।
গ্লোবাল স্টাইল এবং মিডিয়া কোয়ারি যোগ করা শুরু করুন
প্রথমে, আমি কিছু গ্লোবাল স্টাইল যোগ করব যা আমি সবসময় ব্যবহার করার চেষ্টা করি:
html { font-size: 100%; box-sizing: border-box; } body { margin: 0px; padding: 0px; min-height: 100vh; } *, *::before, *::after { box-sizing: inherit; }এছাড়াও, রঙগুলো কিছুটা আকর্ষণীয় করি। <body> ট্যাগে background-color: #1b1b1b সেট করব, এবং সব এলিমেন্ট ও <a> লিংককে সাদা করব color: #ffffff দিয়ে যাতে এটি ডার্ক থিমড হয়।
<nav>-এ <ul> এলিমেন্টের জন্য: list-style-type: none যোগ করব বুলেট লুকাতে, এবং মার্জিন ও প্যাডিং 0px সেট করব।
<nav> এলিমেন্টে কিছু প্যাডিং যোগ করব padding: 10px দিয়ে, এবং ট্যাবলেট ও ডেস্কটপ স্টাইলের জন্য মিডিয়া কোয়ারি ব্যবহার করে প্যাডিং বাড়াব:
nav { padding: 10px; @media (min-width: 600px){ padding: 20px; } }কিছুটা ভালো লাগছে! ডিফল্ট সেরিফ ফন্টের বদলে, আমি একটি Google Font, Open Sans ব্যবহার করতে চাই।
আমরা style.scss-এ ফন্ট ফ্যামিলি ইমপোর্ট করতে পারি ভেরি টপে এই লাইন যোগ করে:
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); এখন <body> এলিমেন্টের স্টাইলে, font-family: 'Open Sans', Arial, Helvetica, sans-serif সেট করে Open Sans বা ব্যাকআপ ফন্ট লোড করব।
লিনিয়ার-গ্রেডিয়েন্ট বটম বর্ডার সহ লিংক স্টাইল যোগ করুন
লিংক স্টাইলগুলো কিছুটা আরো আকর্ষণীয় করি।
ডিফল্ট আন্ডারলাইন সরাতে <a> এলিমেন্টে text-decoration: none সেট করব। এবং আমি এটিকে একটি মোটা গোলাপি আন্ডারলাইনে প্রতিস্থাপন করতে চাই, border-bottom ব্যবহার করে। হোভারে একটি গ্রেডিয়েন্ট আন্ডারলাইনও তৈরি করব গোলাপি থেকে বেগুনি রঙে।
রঙের জন্য, আমি Sass ভেরিয়েবল তৈরি করতে পছন্দ করি। style.scss ফাইলের টপে @import স্টেটমেন্টের নিচে নিচের ভেরিয়েবলগুলো যোগ করুন:
$linkPink: rgb(216, 29, 216); $linkPurple: rgb(98, 16, 250);ভেরিয়েবল ব্যবহার করলে অন্যান্য স্টাইলে রঙ যোগ করার সময় সহজ হবে।
আবার, মোটা আন্ডারলাইন তৈরি করতে, আমরা <a> ট্যাগের একটি সিউডো-এলিমেন্ট ব্যবহার করতে পারি বটম বর্ডার করতে।
কোডটি নিচে দেওয়া হলো:
a { position: relative; text-decoration: none; } a::before { content: ""; position: absolute; height: 3px; right: 0px; bottom: -3px; left: 0px; background-color: $linkPink; }এখানে হচ্ছে: আমরা ::before সিউডো-এলিমেন্টকে ৩px uzun এবং গোলাপি ব্যাকগ্রাউন্ড দিয়ে বানাচ্ছি। এটি বটমে পозиশন করতে, আমাদের এটিকে position: absolute সেট করতে হবে এবং নিশ্চিত করতে হবে <a> এলিমেন্টে position: relative আছে যাতে এটি পেজের উপরে উড়ে না যায়। (এটি সম্পর্কে আরও বিস্তারিত এখানে ব্যাখ্যা করেছি।)
তারপর, সিউডো-এলিমেন্টটি টেক্সটের নিচে পозиশন করতে, আমরা bottom: -3px সেট করছি যাতে লিংক টেক্সট এবং লাইনের মাঝপথে কিছু স্পেস থাকে। এবং লাইনটি লিংকের পুরো প্রস্থে বিস্তার করতে, আমরা left: 0px এবং right: 0px ব্যবহার করছি।
এখন লিংকগুলো কিছুটা ভালো দেখাচ্ছে!
লিনিয়ার গ্রেডিয়েন্ট হোভার স্টাইল
এক ধাপ আরো ফ্যান্সি করি এবং একটি কুল হোভার ইফেক্ট যোগ করি। আমরা চাই হোভারের সময় আন্ডারলাইন গোলাপি থেকে বেগুনি গ্রেডিয়েন্টে পরিবর্তন হবে, এবং লিংক টেক্সট সাদা থেকে গোলাপি হয়ে যাবে।
এটি করতে, আমরা a:hover সিলেক্টর ব্যবহার করে নিচের স্টাইলগুলো দিব:
a:hover { color: $linkPink; &::before { background: linear-gradient(to right, $linkPink 40%, $linkPurple 75%); } }::before সিউডো-এলিমেন্টের জন্য, ব্যাকগ্রাউন্ড এখন একটি linear-gradient-এ পরিবর্তন হবে। গ্রেডিয়েন্ট ফাংশনে, আমরা বলছি যে বাম থেকে ডানে যাওয়ার সাথে সাথে এটি গোলাপি থেকে বেগুনিতে পরিবর্তন হবে।
এবং আমরা পার্সেন্টেজ ব্যবহার করে গ্রেডিয়েন্ট কোথায় পরিবর্তন হবে তা কন্ট্রোল করছি। আমরা চাই প্রথম গোলাপি রঙ ০% (খুব বাম) থেকে ৪০% প্রস্থ পর্যন্ত যায়। এবং দ্বিতীয় বেগুনি রঙ ১০০% (খুব ডান) থেকে ৭৫% প্রস্থ পর্যন্ত যায়। তারপর ৪০% এবং ৭৫% প্রস্থের মাঝপথে একটি গ্রেডিয়েন্ট থাকবে।
আমরা হোভারে লিংক টেক্সট রঙও গোলাপি করেছি।
এখন লিংকের ওপর হোভার করলে এটি নিচের মতো দেখাবে:
কाफी ফ্যান্সি দেখাচ্ছে না?
ঠিক আছে, এখন আমরা ফ্লেক্সবক্স এবং গ্রিড নেভিগেশন বার দুটির জন্য ব্যবহার করা গ্লোবাল স্টাইলগুলো শেষ করেছি।
চলুন ফ্লেক্সবক্স নেভিগেশনের স্টাইল লিখা শুরু করি।
ফ্লেক্সবক্স নেভিগেশন
লিংকগুলো ফ্লেক্স চাইল্ড গ্রুপে ভাগ করুন
আমি সাধারণত ডেস্কটপ স্টাইল প্রথম লিখি, তারপর মোবাইল। কারণ ডেস্কটপ সাধারণত একাধিক কলামের কারণে বেশি জটিল, মোবাইলে জিনিসগুলো সাধারণত এক কলামে স্ট্যাক্ড থাকে। কিন্তু আপনি যেকোনো ক্রমে স্টাইল লিখতে পারেন যা আপনার জন্য সুবিধাজনক।
আমাদের ডেস্কটপ নেভিগেশনে, আমরা Home লিংকটি বামে চাই, এবং অন্যান্য তিনটি সেকেন্ডারি লিংক একসাথে ডানে।
ফ্লেক্সবক্স দিয়ে এটি করতে, আমাদের লিংকগুলোকে দুটি গ্রুপে ভাগ করতে হবে: বামের লিংকগুলোর জন্য একটি গ্রুপ, এবং ডানের লিংকগুলোর জন্য আরেকটি গ্রুপ। উভয় গ্রুপই ফ্লেক্স প্যারেন্টের ফ্লেক্স চাইল্ড এলিমেন্ট হবে।
আমাদের HTML মার্কআপে ফিরে যাই, আমরা চাই <nav> এলিমেন্টটি ফ্লেক্স প্যারেন্ট হয়। তাই Home লিংকটি <ul>- থেকে বের করে <nav> এলিমেন্টের সরাসরি চাইল্ড করব।
বাকি লিংকগুলো <ul>-এ থাকবে।
আমরা <nav>-এ একটি "flexbox" ক্লাসও যোগ করব যাতে আমাদের ফ্লেক্সবক্স স্টাইল গ্রিড স্টাইল থেকে আলাদা থাকে।
আপডেটেড মার্কআপ নিচের মতো হবে:
<nav class="flexbox"> <a href="#">Home</a> <ul> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav>ডেস্কটপের জন্য ফ্লেক্সবক্স স্টাইল যোগ করুন
এখন, আমাদের নেভিগেশনে, ফ্লেক্সবক্স অন করতে nav.flexbox এলিমেন্টকে display: flex সেট করব। তারপর justify-content: space-between রুল যোগ করব যাতে প্রথম গ্রুপ বামে এবং অন্য গ্রুপ ডানে থাকে।
<ul>-কে আরেকটি ফ্লেক্স প্যারেন্ট বানাব display: flex এবং justify-content: flex-end ব্যবহার করে লিংকগুলো ডানে অ্যালাইন করব। এবং align-items: center; যোগ করব ফ্লেক্স চাইল্ড এলিমেন্টগুলো ভার্টিক্যালি সেন্টার করার জন্য।
কিছুটা ভালো লাগছে!
এখন, আমরা তিনটি সেকেন্ডারি লিংককেও পাশাপাশি ফ্লেক্সবক্স আর্কিটেকচারে রাখতে চাই। তাই <ul> এলিমেন্টকে তিনটি লিংকের ফ্লেক্স প্যারেন্ট বানাব, এবং align-items: center সেট করব। আমরা লিংকগুলোর মাঝপথে স্পেসও চাই, তাই margin-right: 20px যোগ করব কিন্তু :last-child সিলেক্টরের জন্য ০px করব। এটি নিশ্চিত করবে যে শেষ লিংকে একস্ট্রা স্পেস নেই।
আমাদের ডেস্কটপ স্টাইল এখন নিচের মতো হবে:
nav.flexbox { display: flex; justify-content: space-between; align-items: center; ul { display: flex; align-items: center; } ul li { margin-right: 20px; &:last-child { margin-right: 0px; } } }এবং নেভিগেশন বারটি নিচের মতো দেখাবে:
মোবাইলের জন্য ফ্লেক্সবক্স স্টাইল যোগ করুন
এখন মোবাইল স্টাইল যোগ করি। প্রথমে, মোবাইলে ফ্লেক্স কন্টেন্ট সেন্টার করি।
এখন মোবাইলে, Home লিংক বামে অ্যালাইন্ড আছে justify-content: space-between রুলের কারণে ফ্লেক্স প্যারেন্ট এলিমেন্টের।
এটি সেন্টার করতে, সেই স্টাইল রুলটি বড় প্রস্থের জন্য একটি মিডিয়া কোয়ারির মধ্যে নিব। তারপর মোবাইলের জন্য justify-content কে center সেট করব।
এরপর, আমরা তিনটি সেকেন্ডারি লিংককে একটি নতুন সারিতে র্যাপ করতে চাই, তাই nav.flexbox সিলেক্টরে flex-wrap: wrap যোগ করব র্যাপিং অন করার জন্য।
স্টাইলগুলো এখন নিচের মতো হবে:
nav.flexbox { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; @media (min-width: 600px){ justify-content: space-between; } }এবং র্যাপ বাধ্যতামূলক করতে, আমরা <ul> ফ্লেক্স চাইল্ডকে ১০০% প্রস্থ নিতে বাধ্য করব, যাতে এটি Home লিংকের নিচে চলে যেতে বাধ্য হয়।
আমি হেল্পার ক্লাস ব্যবহার করা পছন্দ করি, তাই <ul> এলিমেন্টে "fullwidth" ক্লাস যোগ করব, এবং আমাদের nav.flexbox রুলে .fullwidth সিলেক্টরের জন্য কিছু স্টাইল রুল তৈরি করব।
প্রথমে flex: 1 0 100% সেট করব। এই flex প্রপার্টি তিনটি ফ্লেক্স প্রপার্টির শর্টহ্যান্ড: flex-grow, flex-shrink, flex-basis।
আমরা প্রয়োজনে বাড়তে দিচ্ছি flex-grow ১ দিয়ে। এবং আমরা সঙ্কুচিত হওয়া দিচ্ছি না flex-shrink ০ দিয়ে। তারপর ডিফল্ট প্রস্থ ১০০% সেট করছি flex-basis ব্যবহার করে।
আমরা মোবাইলে ফ্লেক্স প্যারেন্টে লিংকগুলো সেন্টারও করব, তাই justify-content: center যোগ করব।
তবে, আমরা ট্যাবলেট বা ডেস্কটপের জন্য সেকেন্ডারি লিংকগুলোকে ফুলউইডথ এবং সেন্টারড রাখতে চাই না। বড় ডিভাইস প্রস্থের জন্য, আমরা চাই flex প্রপার্টি 0 1 auto হবে যাতে এটি বাড়বে না, প্রয়োজনে সঙ্কুচিত হতে পারবে, এবং ডিফল্ট প্রস্থ কন্টেন্টের স্বাভাবিক প্রস্থ হবে।
ডেস্কটপ স্টাইলের জন্য একটি মিডিয়া কোয়ারি যোগ করি:
.fullwidth { flex: 1 0 100%; justify-content: center; @media (min-width: 600px){ flex: 0 1 auto; } }আমি max-width মিডিয়া কোয়ারিও লিখতে পারতাম যাতে প্রথম স্টাইল রুলগুলো শুধু মোবাইল টার্গেট করে। কিন্তু আমি মোবাইল স্টাইল রুল ডিফল্ট হিসেবে ব্যবহার করি, এবং তারপর প্রোগ্রেসিভলি বড় min-width মিডিয়া কোয়ারি যোগ করি কনফ্লিক্ট এড়াতে।
এটি আপনার পছন্দের উপর নির্ভর করে যে আপনি কোন ধরনের মিডিয়া কোয়ারি অধিকাংশ সময় ব্যবহার করবেন, কিন্তু আমি এক ধরন (min বা max) বেছে নেওয়ার পরামর্শ দিই।
এছাড়া, তিনটি সেকেন্ডারি লিংকের জন্য, আমি তাদের প্রস্থ সেট করতে চাই যাতে "Blog" টেক্সট "Home" লিংকের নিচে সেন্টার্ড থাকে। এখন এটি দ্বিতীয় সারির মোট প্রস্থের উপর ভিত্তি করে সেন্টার্ড। কিন্তু "Contact" "About"-এর চেয়ে কিছুটা বড়, তাই সারির সেন্টার "Blog" টেক্সটের সেন্টারের কিছুটা ডানে।
এটি সমাধান করতে, আমরা দ্বিতীয় সারির প্রতিটি ফ্লেক্স চাইল্ড কলামকে একই স্ট্যাটিক প্রস্থ ১০০px দিব। তাই flex প্রপার্টি 0 0 100px সেট করব এবং টেক্সট সেন্টার করব। আমরা শুধু মোবাইলের জন্য এই রুল চাই, তাই ডেস্কটপের জন্য এটিকে ক্যান্সেল করব flex কে 0 0 auto সেট করে।
মোবাইলে আইটেমগুলোর মাঝপথে স্পেসও ১০px করব, ডেস্কটপ প্রস্থের জন্য ২০px থাকবে।
কোডটি নিচের মতো হবে:
ul li { flex: 0 0 100px; margin-right: 10px; text-align: center; @media (min-width: 600px){ flex: 0 0 auto; margin-right: 20px; } &:last-child { margin-right: 0px; } }শেষ টুইক হলো প্রথম Home লিংক এবং তিনটি সেকেন্ডারি লিংকের মাঝপথে কিছু স্পেস যোগ করা মোবাইলের জন্য margin-bottom দিয়ে। আমরা একটি স্টাইল রুল লিখব <a> এলিমেন্টকে টার্গেট করে যা nav.flexbox প্যারেন্টের সরাসরি চাইল্ড, যাতে শুধু Home লিংক প্রভাবিত হয়:
nav.flexbox { > a { margin-bottom: 10px; @media (min-width: 600px){ margin-bottom: 0px; } } }মোবাইল নেভিগেশন কেমন দেখাবে, Firefox ফ্লেক্সবক্স ইন্সপেক্টর অন থাকা অবস্থায়, যাতে আপনি প্রতিটি কলামের লাইন দেখতে পারেন:
এতে ফ্লেক্সবক্স নেভিগেশন শেষ! এখন শুধু CSS গ্রিড ব্যবহার করে এটি বিল্ড করা শুরু করি।
CSS গ্রিড পদ্ধতি
ফ্লেক্সবক্স এবং গ্রিডের মধ্যে একটি প্রধান পার্থক্য হলো: ফ্লেক্সবক্সে, কলাম এবং সারির সাজসজ্জা ফ্লেক্স চাইল্ড এলিমেন্টগুলোর flex প্রপার্টিতে সেট করা ফ্লেক্স প্রপার্টি এবং ফ্লেক্স প্যারেন্ট র্যাপ হবে কিনা তা দ্বারা নির্ধারিত হয়। তাই বলা যায় ফ্লেক্সবক্স একটি "কন্টেন্ট-ফার্স্ট" পদ্ধতি মেনে চলে।
CSS গ্রিডের সাথে, এটি একটি "গ্রিড-ফার্স্ট" পদ্ধতি। আপনি আপনার গ্রিড টেমপ্লেট ডিজাইন করেন (অর্থাৎ কলাম এবং সারিগুলো) প্যারেন্ট এলিমেন্টে গ্রিড প্রপার্টি ব্যবহার করে। এবং আপনি গ্রিড চাইল্ড এলিমেন্টগুলোকে সেই গ্রিড টেমপ্লেটে কোথায় রাখবেন তা אינডিভিজুয়ালি কন্ট্রোল করতে পারেন।
এই 인ডিভিজুয়াল কন্ট্রোলের কারণে, আমাদের CSS গ্রিড নেভিগেশন বারে, আমরা প্রথম Home লিংকসহ সব লিংক একই প্যারেন্ট <ul>-এ রাখতে পারি।
<nav class="grid"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav>মোবাইলের জন্য গ্রিড স্টাইল যোগ করুন
আমাদের গ্রিড নেভিগেশনের সাথে একটু পরিবর্তন আনি এবং মোবাইল স্টাইল প্রথমে লিখি!
মোবাইলে, আমরা Home লিংকটি প্রথম সারিতে চাই, ১০০% প্রস্থ নেবে। তারপর তিনটি সেকেন্ডারি লিংক দ্বিতীয় সারিতে থাকবে, এবং সেন্টার্ড থাকবে।
আমাদের <ul> গ্রিড প্যারেন্ট এলিমেন্টে, আমরা display: grid সেট করে গ্রিড অন করব।
এখন, আমাদের গ্রিড টেমপ্লেট ডিজাইন করি। যেহেতু দ্বিতীয় সারিতে তিনটি লিংক থাকবে, তাই একটি তিন-কলাম টেমপ্লেট তৈরি করি।
আমি কলামগুলো একই প্রস্থের রাখতে চাই, কিন্তু খুব চওড়া নয়। তাই <ul> গ্রিড প্যারেন্টে grid-template-columns: repeat(3, 100px) সেট করব।
আমরা repeat() ফাংশন ব্যবহার করে ১০০px প্রস্থের তিনটি কলাম তৈরি করছি।
CSS গ্রিডের আরেকটি উপকারী বৈশিষ্ট্য হলো গ্রিড আইটেমগুলোর মাঝপথে গাটার (স্পেস) তৈরি করার ক্ষমতা। তাই ফ্লেক্সবক্সের মতো গ্রিড চাইল্ডে মার্জিন যোগ করার বদলে, আমরা সহজে grid-gap: 10px সেট করতে পারি।
আমরা পুরো গ্রিডকে পেজে সেন্টারও করতে পারি justify-content: center দিয়ে, এবং প্রতিটি কলামে টেক্সট সেন্টার করতে justify-items: center দিয়ে।
Firefox গ্রিড ইন্সপেক্টর অন করলে (এটি খুব অসাধারণ, আপনি যদি চেষ্টা না করে থাকেন, তবে একবার করে দেখুন) গ্রিডটি নিচের মতো দেখাবে:
আমরা স্পষ্টভাবে আমাদের সেন্টার্ড তিন-কলাম গ্রিড দেখতে পাচ্ছি, কিন্তু Home লিংককে তার নিজস্ব সারিতে থাকতে হবে। আমরা চাই এটি তিনটি কলামের প্রস্থ নেবে।
এটি করতে, আমরা আবার একটি হেল্পার ক্লাস ব্যবহার করব, Home <li> এলিমেন্টে "fullwidth" ক্লাস যোগ করব।
আমাদের স্টাইলে, .fullwidth সিলেক্টরে grid-column: 1 / 4 স্টাইল রুল দিব। এটি সেই গ্রিড চাইল্ড কলামকে প্রথম ভার্টিক্যাল গ্রিড লাইন থেকে শুরু করে চতুর্থ গ্রিডলাইন পর্যন্ত শেষ পর্যন্ত বিস্তার করবে।
এটি কেমন দেখাবে, এবং আমরা লাইন নাম্বার অন করেছি যাতে আপনি দেখতে পান সেগুলো কীভাবে নম্বর করা হয়েছে:
ডেস্কটপের জন্য গ্রিড স্টাইল যোগ করুন
ডেস্কটপের জন্য, আমরা সব লিংক একই সারিতে চাই। এবং আবার, Home লিংক বামে, এবং অন্যান্য তিনটি লিংক ডান পাশে।
আমি চাই শেষ তিনটি কলামের প্রস্থ তাদের কন্টেন্টের আকার অনুযায়ী হয়। এটি নিশ্চিত করবে যে লিংকগুলোর মাঝপথে একই পরিমাণ স্পেস থাকে।
এই সব মানে আমাদের বড় ডিভাইস প্রস্থের জন্য গ্রিড টেমপ্লেট পরিবর্তন করতে হবে, একটি মিডিয়া কোয়ারি ব্যবহার করে।
তাহলে টেমপ্লেটকে কীতে পরিবর্তন করা উচিত? আমরা সব লিংক একই সারিতে চাই, তাই একটি চার-কলাম গ্রিড দরকার।
সঠিক দিকে একটি ধাপ নেওয়ার জন্য, grid-template-columns প্রপার্টিটিকে repeat(3, 100px) থেকে repeat(4, 100px) এ পরিবর্তন করি গ্রিড প্যারেন্টে ৬০০px-এর চেয়ে বড় প্রস্থের জন্য।
এটি চারটি কলাম তৈরি করবে, এবং তারপর আমরা এটিকে আরও টুইক করতে পারি।
এছাড়া, .fullwidth স্টাইলগুলো আপডেট করি যাতে ডেস্কটপে এটি শুধু এক কলাম নেয়, grid-column: 1 / 2 সেট করে। এটি প্রথম Home কলামকে শুধু গ্রিড লাইন ১ থেকে গ্রিড লাইন ২ পর্যন্ত বিস্তার করবে।
এখন পর্যন্ত আমাদের কী আছে:
লিংকগুলো চার কলামে আছে, কিন্তু যেহেতু সেগুলো সব ১০০px চওড়া, সেগুলো শুধু পেজের মাঝখানে সেন্টার্ড।
প্রথম Home লিংককে সম্পূর্ণ বামে নিয়ে যেতে, আমাদের গ্রিডটিকে পেজের ১০০% প্রস্থ নিতে হবে। এবং এটি করতে, আমরা গ্রিড টেমপ্লেটে শুধু প্রথম কলামকে যেকোনো উপলব্ধ স্পেস নিতে দিতে পারি।
তাই grid-template-columns-কে 1fr repeat(3, 100px) এ পরিবর্তন করলে তিনটি সেকেন্ডারি লিংক ১০০px চওড়া থাকবে। এবং প্রথম কলাম বাকি স্পেস নেবে।
এটি কেমন দেখায়:
প্রায় হইছে! কিন্তু, শেষ তিনটি কলামকে শুধু তাদের কন্টেন্টের প্রস্থে আনার জন্য, আমরা fit-content() ফাংশন ব্যবহার করব। যদি আমরা শেষ তিনটি কলামকে fit-content(50px) সেট করি, তবে কলামগুলো ইনডিভিজুয়ালি কন্টেন্ট ফিট করার জন্য সাইজ হবে।
তাই ডেস্কটপের জন্য আমাদের grid-template-columns প্রপার্টিটি এখন হবে 1fr repeat(3, fit-content(50px))।
কলাম প্রস্থগুলো ভালো দেখাচ্ছে!
এখন কলামগুলোর লিংক টেক্সট অ্যালাইনমেন্ট নিয়ে কাজ করি। এখন সেগুলো justify-items: center রুলের কারণে সেন্টার্ড যা আমরা মোবাইলে ব্যবহার করেছিলাম।
ডেস্কটপের জন্য এটিকে justify-items: end এ পরিবর্তন করি লিংকগুলো ডানে অ্যালাইন করতে। তারপর শুধু Home লিংককে বামে অ্যালাইন করব .fullwidth সিলেক্টরের জন্য justify-self: start সেট করে।
এখন আমরা গ্রিডের জন্য ফিনিশড ডেস্কটপ নেভিগেশন দেখতে পাচ্ছি, এবং এটি ফ্লেক্সবক্স নেভিগেশনটির সাথে মিলে যায়:
ফ্লেক্সবক্স নাকি গ্রিড?
এই নেভিগেশন বানাতে, ফ্লেক্সবক্স স্টাইলগুলো আমাদের style.scss-এ ৪৬ লাইন কোড লাগল, এবং HTML মার্কআপ কিছুটা বেশি জটিল ছিল।
গ্রিড স্টাইলগুলো মাত্র ২৪ লাইন কোডে লিখা হয়েছে! পার্থক্যের বড় অংশ এই কারণেই যে ফ্লেক্সবক্সে আমাদের margin-bottom এবং margin-right স্টাইল রুল যোগ করতে হয়েছিল আইটেমগুলোর মাঝপথে স্পেস যোগ করতে। আর গ্রিডে সেটি সব grid-gap প্রপার্টি নিয়ে নেয়।
ব্যক্তিগতভাবে আমি CSS গ্রিডের জন্য দরকার লাইটওয়েট কোড খুব পছন্দ করি। কিন্তু ফ্লেক্সবক্সও নিঃসন্দেহে একটি ভাল অপশন যদি আপনি ফ্লেক্সবক্সের সাথে বেশি কমফরটেবল হন!
সোর্স কোড এখানে Codepen-এ দেখতে পারেন।
