আজকের টিউটোরিয়ালে, আমরা HTML এবং CSS সহ একটি শীর্ষ নেভিগেশন বার তৈরি করতে যাচ্ছি। আমরা এই নেভিবার তৈরির দুটি ভিন্ন উপায় দেখব, একটি ফ্লেক্সবক্স দিয়ে এবং অন্যটি CSS গ্রিড দিয়ে।
এটি দুটি পদ্ধতির মধ্যে পার্থক্য তুলনা করার একটি ভাল উপায় হবে। এবং আপনি দেখতে পারেন কোন পদ্ধতিটি আপনি ভাল পছন্দ করেন৷
৷সমাপ্ত নেভিগেশন কেমন হবে তা এখানে:
ডেস্কটপে, সমস্ত লিঙ্ক একই সারিতে থাকবে, বামদিকে হোম সহ, এবং অন্যান্য লিঙ্কগুলি ডানদিকে থাকবে৷
তারপর মোবাইলে, উপরের সারিতে হোম এবং নীচের সারিতে অন্যান্য লিঙ্কগুলি থাকবে। এবং লিঙ্কগুলি পৃষ্ঠায় কেন্দ্রীভূত হবে৷
৷আমাদের ফাইল সেট আপ করে শুরু করা যাক।
ফাইল সেট আপ করুন
আমাদের নেভিগেশন তৈরি করতে আমরা একটি index.html তৈরি করতে যাচ্ছি ফাইল এবং একটি style.scss ফাইল, যা আমরা style.css এ কম্পাইল করব ভিএস কোড লাইভ সাস এক্সটেনশন ব্যবহার করে।
আমাদের <head>-এ বিভাগে আমরা একটি <link> যোগ করব style.css লোড করার জন্য উপাদান ফাইল।
এখন সেই নেভিগেশন বার তৈরি করা শুরু করা যাক!
HTML মার্কআপ তৈরি করুন
আমাদের index.html-এ ফাইল, প্রথমে নেভিগেশনের জন্য HTML মার্কআপ তৈরি করা যাক। আমি যতটা সম্ভব শব্দার্থিক HTML ট্যাগ ব্যবহার করার চেষ্টা করি, সবকিছুর জন্য শুধু ডিভ ব্যবহার করা এড়াতে।
আমরা একটি <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 সহ সাদা তাই এটি গাঢ় থিমযুক্ত৷
তারপর <ul>-এর জন্য <nav> এ উপাদান , :list-style-type: none যোগ করুন বুলেট লুকানোর জন্য, এবং মার্জিন এবং প্যাডিং সেট করুন 0px .
চলুন <nav>-এ কিছু প্যাডিং যোগ করি padding: 10px সহ উপাদান , এবং মিডিয়া ক্যোয়ারী ব্যবহার করে ট্যাবলেট এবং ডেস্কটপ শৈলীর জন্য প্যাডিং বাড়ান:
nav {
padding: 10px;
@media (min-width: 600px){
padding: 20px;
}
}জিনিসগুলি আরও ভাল দেখাচ্ছে! ডিফল্ট সেরিফ ফন্টের পরিবর্তে, আমি একটি Google ফন্ট, 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 বা একটি ব্যাকআপ ফন্ট লোড করতে।
একটি লিনিয়ার-গ্রেডিয়েন্ট নীচের সীমানা সহ লিঙ্ক শৈলী যোগ করুন
আসুন লিঙ্ক শৈলীগুলিকে আরও কিছুটা আকর্ষণীয় করে তুলি।
আমরা text-decoration: none সেট করে ডিফল্ট আন্ডারলাইন সরিয়ে ফেলতে যাচ্ছি <a>-এ উপাদান এবং আমি 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 তৈরি করছি সিউডো-এলিমেন্ট 3px লম্বা এবং গোলাপী পটভূমি সহ। এটিকে নীচে অবস্থান করতে, আমাদের এটিকে 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 এ পরিবর্তিত হবে . গ্রেডিয়েন্ট ফাংশনে, আপনি বাম থেকে ডানে যাওয়ার সাথে সাথে আমরা এটিকে গোলাপী থেকে বেগুনিতে পরিবর্তন করতে বলছি৷
এবং শতাংশের সাথে গ্রেডিয়েন্ট কোথায় পরিবর্তন হয় তা আমরা নিয়ন্ত্রণ করছি। আমরা চাই প্রথম গোলাপী রঙটি 0% (অনেক বাম) থেকে 40% প্রস্থে চলে যাক। এবং আমরা চাই দ্বিতীয় বেগুনি রঙটি 100% (অনেক ডানে) থেকে 75% প্রস্থে যাক। তারপরে উপাদানটির প্রস্থের 40% এবং 75% এর মধ্যে একটি গ্রেডিয়েন্ট থাকবে৷
এছাড়াও আমরা হোভারে লিঙ্কের পাঠ্যের রঙটি গোলাপী করে পরিবর্তন করেছি।
সুতরাং এখন আপনি যখন একটি লিঙ্কের উপর হোভার করেন তখন এটি এইরকম দেখাবে:
আরো অভিনব দেখাচ্ছে তাই না?
ঠিক আছে, এখন আমরা ফ্লেক্সবক্স এবং গ্রিড নেভিগেশন বার উভয়ের জন্য যে গ্লোবাল স্টাইলগুলি ব্যবহার করব তা শেষ করেছি৷
ফ্লেক্সবক্স নেভিগেশনের জন্য স্টাইল লেখা শুরু করা যাক।
ফ্লেক্সবক্স নেভিগেশন
লিঙ্কগুলিকে ফ্লেক্স চাইল্ড গ্রুপে ভাগ করুন
আমি সাধারণত প্রথমে ডেস্কটপ শৈলী লিখে শুরু করি এবং তারপরে মোবাইল। কারণ ডেস্কটপ সাধারণত একাধিক কলামের সাথে আরও জটিল হয়, যেখানে মোবাইলে জিনিসগুলি একটি কলামে স্ট্যাক করা থাকে। কিন্তু আপনি আপনার স্টাইল লিখতে পারেন যে ক্রমানুসারে আপনার জন্য বোধগম্য হয়।
আমাদের ডেস্কটপ নেভিগেশনে, আমরা হোম লিঙ্কটি বাম দিকে এবং বাকি তিনটি গৌণ লিঙ্ক ডানদিকে থাকতে চাই।
ফ্লেক্সবক্সের সাথে এটি ঘটানোর জন্য, আমাদের লিঙ্কগুলিকে দুটি গ্রুপে ভাগ করতে হবে:একটি বাম দিকের লিঙ্কগুলির জন্য এবং অন্যটি ডানদিকের লিঙ্কগুলির জন্য৷ উভয় গ্রুপ তখন ফ্লেক্স প্যারেন্টের ফ্লেক্স চাইল্ড উপাদান হবে।
আমাদের HTML মার্কআপে ফিরে গিয়ে, আমরা চাই <nav> ফ্লেক্স প্যারেন্ট হতে উপাদান. তাহলে চলুন হোম লিঙ্কটিকে <ul> থেকে সরিয়ে দেওয়া যাক এবং এটিকে <nav>-এর সরাসরি সন্তান বানিয়ে নিন উপাদান।
তারপর বাকি লিঙ্কগুলি <ul> এর ভিতরে থাকবে .
চলুন <nav>-এ একটি "ফ্লেক্সবক্স" ক্লাস যোগ করি আমাদের ফ্লেক্সবক্স শৈলীগুলিকে পরবর্তীতে আমাদের গ্রিড শৈলী থেকে আলাদা রাখতে৷
আপডেট করা মার্কআপটি দেখতে এরকম হবে:
<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>ডেস্কটপের জন্য flexbox শৈলী যোগ করুন
এখন, আমাদের নেভিগেশনে, আমরা nav.flexbox সেট করে 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 এর জন্য এটিকে 0px করুন নির্বাচক এটি নিশ্চিত করে যে শেষ লিঙ্কটিতে অতিরিক্ত স্থান থাকবে না।
আমাদের ডেস্কটপ শৈলী এখন এইরকম দেখাবে:
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;
}
}
}এবং নেভিগেশন বারটি এইরকম দেখাবে:
মোবাইলের জন্য flexbox শৈলী যোগ করুন
এখন মোবাইল স্টাইল যোগ করা যাক। প্রথমে, চলুন মোবাইলে ফ্লেক্স বিষয়বস্তু কেন্দ্রীভূত করি।
এই মুহূর্তে মোবাইলে, justify-content: space-between এর কারণে হোম লিঙ্কটি বাম দিকে সারিবদ্ধ করা হয়েছে ফ্লেক্স প্যারেন্ট উপাদানের জন্য নিয়ম।
আমরা বৃহত্তর প্রস্থের জন্য একটি মিডিয়া ক্যোয়ারীতে সেই শৈলীর নিয়মটি সরানোর মাধ্যমে এটিকে কেন্দ্রীভূত করতে পারি। তারপর justify-content সেট করুন center মোবাইলের জন্য।
এর পরে, আমরা তিনটি গৌণ লিঙ্ক একটি নতুন সারিতে মোড়ানো চাই, তাই আসুন flex-wrap: wrap যোগ করি nav.flexbox-এ মোড়ানো সক্ষম করতে নির্বাচক৷
স্টাইলগুলি তখন এইরকম হওয়া উচিত:
nav.flexbox {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
@media (min-width: 600px){
justify-content: space-between;
}
}
এবং জোর করে মোড়ানোর জন্য, আমরা <ul> তৈরি করতে যাচ্ছি ফ্লেক্স চাইল্ড প্রস্থের 100% গ্রহণ করে, তাই এটি শুধুমাত্র হোম লিঙ্কের নীচে সরানো হলেই ফিট হতে পারে।
আমি সাহায্যকারী ক্লাস ব্যবহার করতে পছন্দ করি, তাই আমরা <ul>-এ "পূর্ণ প্রস্থ" এর একটি ক্লাস যোগ করছি উপাদান, এবং .fullwidth-এর জন্য কিছু শৈলী নিয়ম তৈরি করে আমাদের nav.flexbox-এ নির্বাচক নিয়ম।
প্রথমে আমরা flex: 1 0 100% সেট করব . এই flex বৈশিষ্ট্য হল তিনটি ফ্লেক্স বৈশিষ্ট্যের সংক্ষিপ্ত বিবরণ:flex-grow , flex-shrink , flex-basis .
প্রয়োজনে আমরা flex-grow এর মাধ্যমে এটিকে বাড়তে দিচ্ছি এর 1. এবং আমরা এটিকে flex-shrink দিয়ে সঙ্কুচিত হতে দিচ্ছি না 0 এর। তারপর আমরা flex-basis ব্যবহার করে ডিফল্ট প্রস্থ 100% সেট করছি .
আমরা মোবাইলে ফ্লেক্স প্যারেন্টে লিঙ্কগুলিকে কেন্দ্রে রাখতে যাচ্ছি, তাই আমরা 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 যোগ করছি দ্বন্দ্ব এড়াতে মিডিয়া প্রশ্ন।
আপনি কোন ধরনের মিডিয়া কোয়েরি ব্যবহার করেন তা সত্যিই আপনার উপর নির্ভর করে, তবে আমি বেশিরভাগ সময় ব্যবহার করার জন্য একটি প্রকার (মিনিট বা সর্বোচ্চ) বেছে নেওয়ার পরামর্শ দিই।
এছাড়াও, তিনটি মাধ্যমিক লিঙ্কের জন্য, আমি তাদের প্রস্থ সেট করতে চাই যাতে "ব্লগ" পাঠ্যটি "হোম" লিঙ্কের নীচে কেন্দ্রীভূত হয়। এই মুহূর্তে এটি দ্বিতীয় সারির লিঙ্কগুলির মোট প্রস্থের উপর ভিত্তি করে কেন্দ্রীভূত। কিন্তু যেহেতু "যোগাযোগ" "সম্পর্কে" এর চেয়ে একটু বেশি, তাই সারির কেন্দ্রটি "ব্লগ" পাঠ্যের কেন্দ্রের ডানদিকে সামান্য।
এটি ঠিক করতে, আমরা দ্বিতীয় সারিতে প্রতিটি ফ্লেক্স চাইল্ড কলাম 100px এর একই স্ট্যাটিক প্রস্থে তৈরি করব। তাই আমরা একটি flex সেট করব সম্পত্তি 0 0 100px এবং টেক্সট কেন্দ্রে। আমরা শুধুমাত্র মোবাইলের জন্য সেই নিয়মগুলি চাই, তাই আমরা flex সেট করে ডেস্কটপের জন্য সেগুলি বাতিল করব 0 0 auto .
আসুন মোবাইলের জন্য আইটেমগুলির মধ্যে স্পেস কমিয়ে 10px করি, এবং এটি ডেস্কটপের প্রস্থের জন্য 20px-এ থাকবে।
এখানে সকলের জন্য কোড দেখতে কেমন হবে:
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;
}
}
শেষ টুইকটি আমরা করব প্রথম হোম লিঙ্ক এবং একটি margin-bottom সহ তিনটি সেকেন্ডারি লিঙ্কের মধ্যে কিছু জায়গা যোগ করা। মোবাইলের জন্য। আমরা <a> লক্ষ্য করে একটি স্টাইল নিয়ম লিখব উপাদান যা nav.flexbox-এর সরাসরি সন্তান অভিভাবক, তাই শুধুমাত্র হোম লিঙ্ক প্রভাবিত হবে:
nav.flexbox {
> a {
margin-bottom: 10px;
@media (min-width: 600px){
margin-bottom: 0px;
}
}
}ফায়ারফক্স ফ্লেক্সবক্স ইন্সপেক্টর চালু থাকলে মোবাইল নেভিগেশন কেমন দেখাবে, তাই আপনি প্রতিটি কলামের লাইন দেখতে পারেন:
এবং এটি ফ্লেক্সবক্স নেভিগেশনের জন্য! এখন শুধুমাত্র CSS গ্রিড ব্যবহার করে এটি তৈরি করার দিকে এগিয়ে যাওয়া যাক।
CSS গ্রিড পদ্ধতি
ফ্লেক্সবক্স এবং গ্রিডের মধ্যে একটি প্রধান পার্থক্য হল যে ফ্লেক্সবক্সের সাথে, কলাম এবং সারিগুলির বিন্যাস flex এ ফ্লেক্স চাইল্ড উপাদানগুলিতে সেট করা ফ্লেক্স বৈশিষ্ট্য দ্বারা নির্ধারিত হয়। সম্পত্তি, এবং ফ্লেক্স প্যারেন্ট মোড়ানো সেট করা আছে কি না। তাই আপনি বলতে পারেন যে ফ্লেক্সবক্স একটি "কন্টেন্ট-প্রথম" পদ্ধতি অনুসরণ করে।
CSS গ্রিডের সাথে, এটি একটি "গ্রিড-প্রথম" পদ্ধতি। আপনি প্যারেন্ট এলিমেন্টে গ্রিড বৈশিষ্ট্য ব্যবহার করে আপনার গ্রিড টেমপ্লেট (অর্থাৎ কলাম এবং সারি) ডিজাইন করেন। এবং আপনি স্বতন্ত্রভাবে নিয়ন্ত্রণ করতে পারেন যে গ্রিড টেমপ্লেটে কোথায় গ্রিড চাইল্ড উপাদানগুলি স্থাপন করা হবে।
এই স্বতন্ত্র স্তরের নিয়ন্ত্রণের কারণে, আমাদের CSS গ্রিড নেভিগেশন বারে, আমরা প্রথম হোম লিঙ্ক সহ সমস্ত লিঙ্ক একই প্যারেন্ট <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>মোবাইলের জন্য গ্রিড শৈলী যোগ করুন
আসুন আমাদের গ্রিড নেভিগেশন দিয়ে এটি পরিবর্তন করি এবং প্রথমে মোবাইল শৈলী লিখে শুরু করি!
মোবাইলে, আমরা চাই হোম লিঙ্কটি প্রথম সারিতে থাকুক, প্রস্থের 100% জুড়ে থাকুক। তারপরে আমরা তিনটি সেকেন্ডারি লিঙ্ক একটি দ্বিতীয় সারিতে এবং কেন্দ্রীভূত করতে চাই।
আমাদের <ul>-এ গ্রিড প্যারেন্ট এলিমেন্ট, আমরা display: grid সেট করে গ্রিড চালু করব .
এখন, আমাদের গ্রিড টেমপ্লেট ডিজাইন করা যাক। যেহেতু দ্বিতীয় সারিতে তিনটি লিঙ্ক থাকবে, আসুন একটি তিন-কলামের টেমপ্লেট তৈরি করি।
আমি কলামগুলিকে একই প্রস্থ করতে চাই, কিন্তু আমি চাই না যে সেগুলি খুব বেশি প্রশস্ত হোক। তাহলে চলুন grid-template-columns: repeat(3, 100px) সেট করি <ul>-এ গ্রিড প্যারেন্ট।
আমরা repeat() ব্যবহার করছি 100px প্রস্থের তিনটি কলাম তৈরি করার ফাংশন।
CSS গ্রিডের আরেকটি দরকারী বৈশিষ্ট্য হল গ্রিড আইটেমগুলির মধ্যে গটার (স্পেস) তৈরি করার ক্ষমতা। তাই ফ্লেক্সবক্সের মতো গ্রিড শিশুদের জন্য মার্জিন যোগ করার পরিবর্তে, আমরা সহজভাবে grip-gap: 10px সেট করতে পারি। .
এছাড়াও আমরা justify-content: center দিয়ে পৃষ্ঠার পুরো গ্রিডকে কেন্দ্র করতে পারি , এবং justify-items: center দিয়ে প্রতিটি কলামে পাঠ্যকে কেন্দ্র করুন .
যখন আমরা ফায়ারফক্স গ্রিড ইন্সপেক্টর চালু করি (এটি সত্যিই দুর্দান্ত, যদি আপনি এটি চেষ্টা না করে থাকেন) গ্রিডটি এরকম দেখাবে:
আমরা পরিষ্কারভাবে আমাদের কেন্দ্রীভূত তিনটি কলাম গ্রিড দেখতে পাচ্ছি, তবে হোম লিঙ্কটি তার নিজস্ব সারিতে থাকা দরকার। আমরা এটি প্রস্থের তিনটি কলাম নিতে চাই৷
এটি করার জন্য, আমরা হোম <li>-এ “পূর্ণ প্রস্থ”-এর একটি শ্রেণী যোগ করে আবার একটি সাহায্যকারী শ্রেণী ব্যবহার করব। উপাদান।
আমাদের শৈলীতে, আমরা .fullwidth দেব grid-column: 1 / 4-এর একটি শৈলী নিয়ম নির্বাচক . এটি সেই গ্রিড চাইল্ড কলামটিকে প্রথম উল্লম্ব গ্রিড লাইন থেকে শুরু করবে এবং একেবারে শেষে চতুর্থ গ্রিডলাইন পর্যন্ত প্রসারিত করবে৷
এটি দেখতে এইরকম হবে, এবং আমরা লাইন নম্বরগুলি চালু করেছি যাতে আপনি দেখতে পারেন কিভাবে তাদের সংখ্যা করা হয়েছে:
ডেস্কটপের জন্য গ্রিড শৈলী যোগ করুন
ডেস্কটপের জন্য, আমরা চাই সমস্ত লিঙ্ক এক সারিতে থাকুক। এবং আবার, আমরা চাই হোম লিঙ্কটি বাম দিকে থাকুক এবং তারপরে অন্য তিনটি লিঙ্ক ডান পাশে থাকুক।
আমি শেষ তিনটি কলামের প্রতিটিকে এটিতে থাকা বিষয়বস্তুর আকার হিসাবে তৈরি করতে চাই। এটি নিশ্চিত করবে যে লিঙ্কগুলির মধ্যে একই পরিমাণ স্থান রয়েছে।
এই সবের অর্থ হল মিডিয়া ক্যোয়ারী ব্যবহার করে আমাদের বৃহত্তর ডিভাইসের প্রস্থের জন্য গ্রিড টেমপ্লেট পরিবর্তন করতে হবে।
তাই আমরা কি টেমপ্লেট পরিবর্তন করা উচিত? আমরা একই সারিতে সমস্ত লিঙ্ক চাই, তাই আমরা একটি চার-কলাম গ্রিড চাই।
সঠিক পথে মাত্র একটি পদক্ষেপ নিতে, চলুন শুরু করা যাক grid-template-columns পরিবর্তন করে একটি repeat(3, 100px) থেকে সম্পত্তি repeat(4, 100px) করতে 600px এর বেশি প্রস্থের জন্য গ্রিড প্যারেন্টে।
এটি চারটি কলাম তৈরি করবে, এবং তারপরে আমরা এটিকে টুইক করা চালিয়ে যেতে পারি।
এছাড়াও, আসুন .fullwidth আপডেট করি শৈলী তাই এটি grid-column: 1 / 2 সেট করে ডেস্কটপে শুধুমাত্র একটি কলাম নেয় . এটি সেই প্রথম হোম কলামটিকে শুধুমাত্র গ্রিড লাইন 1 থেকে গ্রিড লাইন 2 পর্যন্ত প্রসারিত করবে।
এখন পর্যন্ত আমাদের যা আছে তা এখানে:
লিঙ্কগুলি চারটি কলামে রয়েছে, কিন্তু যেহেতু সেগুলি সবগুলি 100px চওড়া, সেগুলি কেবলমাত্র পৃষ্ঠায় কেন্দ্রীভূত৷
বাম দিকে প্রথম হোম লিঙ্কটি তৈরি করতে, আমাদের গ্রিডটিকে নিজেই পৃষ্ঠার প্রস্থের 100% নিতে হবে। এবং এটি করার জন্য, আমরা গ্রিড টেমপ্লেটের প্রথম কলামটি যে কোনও উপলব্ধ স্থান নিতে পারি৷
তাই grid-template-columns পরিবর্তন করা হচ্ছে 1fr repeat(3, 100px) তিনটি সেকেন্ডারি লিঙ্ক 100px চওড়ায় ছেড়ে যাবে। এবং প্রথম কলামটি বাকি স্থান দখল করবে।
দেখা যাক কেমন লাগে:
সেখানে পেয়ে! যাইহোক, শেষ তিনটি কলাম শুধুমাত্র তাদের বিষয়বস্তুর মতো প্রশস্ত করতে, আমরা fit-content() ব্যবহার করি ফাংশন যদি আমরা শেষ তিনটি কলাম fit-content(50px) এ সেট করি তারপর কলামগুলি পৃথকভাবে বিষয়বস্তুর সাথে মানানসই হবে৷
তাই আমাদের grid-template-columns ডেস্কটপের জন্য সম্পত্তি এখন 1fr repeat(3, fit-content(50px)) হবে .
কলামের প্রস্থ দেখতে সুন্দর!
এখন কলামে লিঙ্ক টেক্সট সারিবদ্ধ করার কাজ করা যাক। এই মুহূর্তে তারা justify-items: center এর কারণে কেন্দ্রীভূত নিয়ম যা আমরা মোবাইলের জন্য ব্যবহার করি।
ডেস্কটপের জন্য এটিকে justify-items: end-এ পরিবর্তন করা যাক ডানদিকে লিঙ্কগুলি সারিবদ্ধ করতে। তারপর আমরা justify-self: start সেট করে হোম লিঙ্কটিকে বাম দিকে সারিবদ্ধ করতে পারি .fullwidth-এর জন্য নির্বাচক।
এখন আমরা গ্রিডের জন্য সমাপ্ত ডেস্কটপ নেভিগেশন দেখতে পাচ্ছি, এবং এটি ফ্লেক্সবক্স নেভিগেশনের সাথে মেলে:
ফ্লেক্সবক্স বা গ্রিড?
এই নেভিগেশন তৈরি করতে, ফ্লেক্সবক্স শৈলী আমাদের style.scss-এ 46 লাইনের কোড নিয়েছে লিখতে, এবং HTML মার্কআপ একটু বেশি জটিল ছিল।
গ্রিড শৈলী লিখতে একটি পাতলা 24 লাইন কোড নিয়েছে! অনেক পার্থক্য ছিল কারণ আমাদের margin-bottom যোগ করতে হয়েছিল এবং margin-right ফ্লেক্সবক্সে আইটেমগুলির মধ্যে স্থান যোগ করার জন্য শৈলীর নিয়ম। এবং গ্রিডে যে সমস্ত grid-gap দিয়ে যত্ন নেওয়া হয়েছিল সম্পত্তি।
আমি ব্যক্তিগতভাবে CSS গ্রিডের জন্য প্রয়োজনীয় লাইটওয়েট কোড পছন্দ করি। তবে আপনি যদি ফ্লেক্সবক্সের সাথে আরও স্বাচ্ছন্দ্যবোধ করেন তবে ফ্লেক্সবক্স এখনও একটি ভাল বিকল্প!
আপনি এখানে কোডপেনে সোর্স কোড দেখতে পারেন।
