গ্ৰীড ব্যৱস্থা
এটা বাৰটা স্তম্ভ ব্যৱস্থাপ্ৰণালী, পাঁচটা অবিকল্পিত প্ৰতিক্ৰিয়াশীল স্তৰ, Sass চলক আৰু মিক্সিন, আৰু কেইবা ডজন পূৰ্বনিৰ্ধাৰিত শ্ৰেণীৰ বাবে ধন্যবাদ সকলো আকৃতি আৰু আকাৰৰ পৰিকল্পনা নিৰ্মাণ কৰিবলৈ আমাৰ শক্তিশালী মোবাইল-প্ৰথম ফ্লেক্সবক্স গ্ৰীড ব্যৱহাৰ কৰক।
বুটষ্ট্ৰেপৰ গ্ৰীড চিস্টেমে বিষয়বস্তু পৰিকল্পনা আৰু প্ৰান্তিককৰণ কৰিবলে ধাৰকসমূহ, শাৰীসমূহ, আৰু স্তম্ভসমূহৰ এটা শৃংখলা ব্যৱহাৰ কৰে। ইয়াক flexbox ৰ সৈতে নিৰ্মিত আৰু ই সম্পূৰ্ণৰূপে সঁহাৰিজনক। তলত এটা উদাহৰণ আৰু গ্ৰীড কেনেকৈ একেলগে আহে তাৰ গভীৰ দৃষ্টিভংগী দিয়া হৈছে।
flexbox ত নতুন বা অচিনাকি? পটভূমি, পৰিভাষা, নিৰ্দেশনা, আৰু ক'ড স্নিপেটৰ বাবে এই CSS Tricks flexbox সহায়ক পঢ়ক ।
ওপৰৰ উদাহৰণটোৱে আমাৰ পূৰ্বনিৰ্ধাৰিত গ্ৰীড শ্ৰেণীসমূহ ব্যৱহাৰ কৰি সৰু, মধ্যমীয়া, ডাঙৰ, আৰু অতিৰিক্ত ডাঙৰ ডিভাইচসমূহত তিনিটা সমান-প্ৰস্থৰ স্তম্ভ সৃষ্টি কৰে। সেই স্তম্ভবোৰ পৃষ্ঠাত মূলৰ সৈতে কেন্দ্ৰ কৰি ৰখা হয় .container
।
ইয়াক ভাঙি পেলালে, ইয়াত ই কেনেকৈ কাম কৰে:
- কণ্টেইনাৰসমূহে আপোনাৰ চাইটৰ বিষয়বস্তুসমূহ কেন্দ্ৰ আৰু অনুভূমিকভাৱে পেড কৰাৰ এটা উপায় প্ৰদান কৰে।
.container
এটা প্ৰতিক্ৰিয়াশীল পিক্সেল প্ৰস্থৰ.container-fluid
বাবে বাwidth: 100%
সকলো দৰ্শনপৰ্ট আৰু ডিভাইচ আকাৰৰ বাবে ব্যৱহাৰ কৰক । - শাৰীবোৰ স্তম্ভৰ বাবে ৰেপাৰ। প্ৰতিটো স্তম্ভৰ
padding
মাজৰ ঠাই নিয়ন্ত্ৰণৰ বাবে অনুভূমিক (যাক নালা বোলা হয়) থাকে। তাৰpadding
পিছত ঋণাত্মক প্ৰান্ত থকা শাৰীবোৰত ইয়াক প্ৰতিহত কৰা হয়। এইদৰে, আপোনাৰ স্তম্ভসমূহৰ সকলো বিষয়বস্তু দৃশ্যমানভাৱে বাওঁফালে তললৈ প্ৰান্তিককৃত কৰা হয়। - এটা গ্ৰীড বিন্যাসত, বিষয়বস্তু স্তম্ভসমূহৰ ভিতৰত ৰাখিব লাগিব আৰু কেৱল স্তম্ভসমূহ শাৰীৰ তাৎক্ষণিক সন্তান হ'ব পাৰে।
- flexbox ৰ বাবে ধন্যবাদ, এটা নিৰ্দিষ্ট নকৰা গ্ৰীড স্তম্ভসমূহে
width
স্বয়ংক্ৰিয়ভাৱে সমান প্ৰস্থৰ স্তম্ভ হিচাপে বিন্যাস কৰিব। উদাহৰণস্বৰূপে, চাৰিটা উদাহৰণৰ.col-sm
প্ৰতিটো স্বয়ংক্ৰিয়ভাৱে সৰু ব্ৰেকপইণ্টৰ পৰা আৰু ওপৰলৈ ২৫% বহল হ’ব। অধিক উদাহৰণৰ বাবে স্বয়ংক্ৰিয়-বিন্যাস স্তম্ভসমূহ অংশ চাওক । - স্তম্ভ শ্ৰেণীসমূহে প্ৰতি শাৰীত সম্ভাৱ্য ১২ টাৰ ভিতৰত আপুনি ব্যৱহাৰ কৰিব বিচৰা স্তম্ভৰ সংখ্যা সূচায়। গতিকে, যদি আপুনি তিনিটা সমান-প্ৰস্থৰ স্তম্ভৰ ওপৰেৰে বিচাৰে, আপুনি ব্যৱহাৰ কৰিব পাৰে
.col-4
। - স্তম্ভ
width
সমূহ শতাংশত নিৰ্ধাৰণ কৰা হয়, গতিকে সিহঁত সদায় তৰল আৰু সিহঁতৰ মূল উপাদানৰ তুলনাত আকাৰৰ। padding
স্তম্ভসমূহৰ ব্যক্তিগত স্তম্ভসমূহৰ মাজত নালা সৃষ্টি কৰিবলে অনুভূমিক থাকে, অৱশ্যে, আপুনিmargin
শাৰীসমূহৰpadding
পৰা আৰু স্তম্ভসমূহৰ.no-gutters
পৰা আঁতৰাব পাৰে.row
।- গ্ৰীডক প্ৰতিক্ৰিয়াশীল কৰিবলৈ, পাঁচটা গ্ৰীড ব্ৰেকপইন্ট আছে, প্ৰতিটো প্ৰতিক্ৰিয়াশীল ব্ৰেকপইন্টৰ বাবে এটা : সকলো ব্ৰেকপইন্ট (অতিৰিক্ত সৰু), সৰু, মধ্যমীয়া, ডাঙৰ, আৰু অতিৰিক্ত ডাঙৰ।
- গ্ৰীড ব্ৰেকপইন্টসমূহ নূন্যতম প্ৰস্থৰ মাধ্যম প্ৰশ্নসমূহৰ ওপৰত ভিত্তি কৰি কৰা হয়, অৰ্থাৎ সিহত সেই এটা ব্ৰেকপইন্ট আৰু ইয়াৰ ওপৰৰ সকলোত প্ৰযোজ্য (যেনে,
.col-sm-4
সৰু, মধ্যমীয়া, ডাঙৰ, আৰু অতিৰিক্ত ডাঙৰ ডিভাইচসমূহৰ বাবে প্ৰযোজ্য, কিন্তু প্ৰথমxs
ব্ৰেকপইন্ট নহয়)। - আপুনি অধিক অৰ্থগত মাৰ্কআপৰ বাবে পূৰ্বনিৰ্ধাৰিত গ্ৰীড শ্ৰেণীসমূহ (যেনে
.col-4
) বা Sass মিক্সিনসমূহ ব্যৱহাৰ কৰিব পাৰে।
flexbox ৰ চাৰিওফালে থকা সীমাবদ্ধতা আৰু বাগসমূহৰ বিষয়ে সচেতন হওক , যেনে কিছুমান HTML উপাদানক flex ধাৰক হিচাপে ব্যৱহাৰ কৰিব নোৱাৰা ।
Bootstrap এ বেছিভাগ আকাৰ সংজ্ঞায়িত কৰাৰ বাবে em
s বা s ব্যৱহাৰ কৰিলেও, s গ্ৰীড ব্ৰেকপইন্ট আৰু ধাৰক প্ৰস্থৰ বাবে ব্যৱহাৰ কৰা হয় । কাৰণ দৰ্শনপৰ্টৰ প্ৰস্থ পিক্সেলত আৰু আখৰৰ আকাৰৰ সৈতে সলনি নহয় ।rem
px
এটা সহজ টেবুলৰ সৈতে একাধিক ডিভাইচসমূহত বুটষ্ট্ৰেপ গ্ৰীড ব্যৱস্থাপ্ৰণালীৰ দিশসমূহে কেনেকৈ কাম কৰে চাওক।
অতিৰিক্ত সৰু <576px |
সৰু ≥576px |
মধ্যমীয়া ≥768px |
ডাঙৰ ≥992px |
অতিৰিক্ত ডাঙৰ ≥1200px |
|
---|---|---|---|---|---|
সৰ্বোচ্চ পাত্ৰৰ প্ৰস্থ | কোনো নাই (অটো) | ৫৪০পিক্সেল | ৭২০পিক্সেল | ৯৬০px | ১১৪০পিক্সেল |
শ্ৰেণী উপসৰ্গ | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# স্তম্ভৰ | ১২ | ||||
নালাৰ প্ৰস্থ | 30px (এটা স্তম্ভৰ প্ৰতিটো ফালে 15px) | ||||
নেষ্টেবল | হয় | ||||
স্তম্ভ অৰ্ডাৰ দিয়া | হয় |
সহজ স্তম্ভ আকাৰ নিৰ্ধাৰণৰ বাবে ব্ৰেকপইন্ট-নিৰ্দিষ্ট স্তম্ভ শ্ৰেণীসমূহ ব্যৱহাৰ কৰক যেনে এটা স্পষ্ট সংখ্যাযুক্ত শ্ৰেণী অবিহনে .col-sm-6
।
উদাহৰণস্বৰূপ, ইয়াত দুটা গ্ৰীড পৰিকল্পনা আছে যি প্ৰতিটো ডিভাইচ আৰু দৰ্শনপৰ্টত প্ৰযোজ্য, ৰ পৰা xs
লৈ xl
। আপুনি প্ৰয়োজনীয় প্ৰতিটো ব্ৰেকপইণ্টৰ বাবে যিকোনো সংখ্যক ইউনিট-বিহীন শ্ৰেণী যোগ কৰক আৰু প্ৰতিটো স্তম্ভ একে প্ৰস্থ হ'ব।
সমান-প্ৰস্থৰ স্তম্ভসমূহক একাধিক শাৰীত ভংগ কৰিব পাৰি, কিন্তু এটা Safari flexbox বাগflex-basis
আছিল যি ইয়াক এটা স্পষ্ট বা অবিহনে কাম কৰাত বাধা দিছিল border
। পুৰণি ব্ৰাউজাৰ সংস্কৰণৰ বাবে ৱৰ্কআৰউণ্ড আছে, কিন্তু আপুনি আপ-টু-ডেট হ'লে সেইবোৰৰ প্ৰয়োজন হ'ব নালাগে।
flexbox গ্ৰীড স্তম্ভসমূহৰ বাবে স্বয়ংক্ৰিয়-বিন্যাসৰ অৰ্থ হৈছে আপুনি এটা স্তম্ভৰ প্ৰস্থ সংহতি কৰিব পাৰিব আৰু ভাই-ভনী স্তম্ভসমূহক ইয়াৰ চাৰিওফালে স্বয়ংক্ৰিয়ভাৱে আকাৰ সলনি কৰিব পাৰিব। আপুনি পূৰ্বনিৰ্ধাৰিত গ্ৰীড শ্ৰেণীসমূহ (তলত দেখুওৱাৰ দৰে), গ্ৰীড মিক্সিনসমূহ, বা ইনলাইন প্ৰস্থসমূহ ব্যৱহাৰ কৰিব পাৰে। মন কৰিব যে কেন্দ্ৰ স্তম্ভৰ প্ৰস্থ যিমানেই নহওক কিয় আন স্তম্ভবোৰে আকাৰ সলনি কৰিব।
col-{breakpoint}-auto
স্তম্ভসমূহৰ বিষয়বস্তুৰ প্ৰাকৃতিক প্ৰস্থৰ ওপৰত ভিত্তি কৰি আকাৰ দিবলৈ শ্ৰেণীসমূহ ব্যৱহাৰ কৰক ।
.w-100
আপুনি স্তম্ভসমূহক এটা নতুন শাৰীলৈ ভাঙিব বিচৰা ঠাইত এটা সন্নিৱিষ্ট কৰি একাধিক শাৰীত বিস্তৃত সমান-প্ৰস্থৰ স্তম্ভ সৃষ্টি কৰক । .w-100
কিছুমান প্ৰতিক্ৰিয়াশীল প্ৰদৰ্শন সঁজুলিৰ সৈতে মিহলাই বিৰতিসমূহক প্ৰতিক্ৰিয়াশীল কৰক ।
বুটষ্ট্ৰেপৰ গ্ৰীডত জটিল প্ৰতিক্ৰিয়াশীল পৰিকল্পনা নিৰ্মাণৰ বাবে পূৰ্বনিৰ্ধাৰিত শ্ৰেণীৰ পাঁচটা স্তৰ অন্তৰ্ভুক্ত কৰা হৈছে। আপোনাৰ স্তম্ভসমূহৰ আকাৰ অতিৰিক্ত সৰু, সৰু, মধ্যমীয়া, ডাঙৰ, বা অতিৰিক্ত ডাঙৰ ডিভাইচসমূহত স্বনিৰ্বাচিত কৰক যিদৰে আপুনি উপযুক্ত বুলি দেখে।
সৰু ডিভাইচৰ পৰা ডাঙৰলৈকে একে গ্ৰীডসমূহৰ বাবে, .col
আৰু .col-*
শ্ৰেণীসমূহ ব্যৱহাৰ কৰক। এটা সংখ্যাযুক্ত শ্ৰেণী ধাৰ্য্য কৰক যেতিয়া আপুনি এটা বিশেষ আকাৰৰ স্তম্ভৰ প্ৰয়োজন হয়; অন্যথা, নিঃসংকোচে লাগি থাকিবলৈ অনুভৱ কৰক .col
।
শ্ৰেণীসমূহৰ এটা গোট ব্যৱহাৰ কৰি .col-sm-*
, আপুনি এটা মূল গ্ৰীড ব্যৱস্থাপ্ৰণালী সৃষ্টি কৰিব পাৰে যি ষ্টেক কৰি আৰম্ভ হয় আৰু সৰু ব্ৰেকপইন্ট ( sm
) ত অনুভূমিক হয়।
আপোনাৰ স্তম্ভসমূহ কিছুমান গ্ৰীড টায়াৰত কেৱল ষ্টেক হোৱাটো নিবিচাৰেনে? প্ৰয়োজন অনুসৰি প্ৰতিটো স্তৰৰ বাবে বিভিন্ন শ্ৰেণীৰ সংমিশ্ৰণ ব্যৱহাৰ কৰক। এই সকলোবোৰ কেনেকৈ কাম কৰে তাৰ উন্নত ধাৰণাৰ বাবে তলৰ উদাহৰণটো চাওক।
স্তম্ভসমূহ উলম্বভাৱে আৰু অনুভূমিকভাৱে প্ৰান্তিককৰণ কৰিবলে flexbox প্ৰান্তিককৰণ সঁজুলিসমূহ ব্যৱহাৰ কৰক।
আমাৰ পূৰ্বনিৰ্ধাৰিত গ্ৰীড শ্ৰেণীসমূহত স্তম্ভসমূহৰ মাজৰ নালাসমূহ ৰ সহায়ত আঁতৰাব পাৰি .no-gutters
। ই সকলো তাৎক্ষণিক শিশু স্তম্ভৰ পৰা ঋণাত্মক margin
s .row
আৰু অনুভূমিক আঁতৰায় ।padding
এই শৈলীসমূহ সৃষ্টি কৰাৰ বাবে উৎস ক'ড ইয়াত দিয়া হৈছে। মন কৰিব যে স্তম্ভ অভাৰৰাইডসমূহক কেৱল প্ৰথম সন্তান স্তম্ভসমূহলে পৰিসৰ দিয়া হয় আৰু বৈশিষ্ট্য নিৰ্বাচকৰ যোগেদি লক্ষ্য কৰা হয় । ই এটা অধিক নিৰ্দিষ্ট নিৰ্বাচক সৃষ্টি কৰিলেও, স্তম্ভ পেডিংক ব্যৱধান সঁজুলিসমূহৰ সৈতে অধিক স্বনিৰ্বাচিত কৰিব পাৰি ।
এজ-টু-এজ ডিজাইনৰ প্ৰয়োজন? অভিভাৱক .container
বা ড্ৰপ কৰক .container-fluid
।
কাৰ্যক্ষেত্ৰত ইয়াত কেনেকুৱা দেখা যায়। টোকা আপুনি ইয়াক অন্য সকলো পূৰ্বনিৰ্ধাৰিত গ্ৰীড শ্ৰেণীৰ সৈতে ব্যৱহাৰ কৰি থাকিব পাৰিব (স্তম্ভৰ প্ৰস্থ, প্ৰতিক্ৰিয়াশীল স্তৰ, পুনৰ ক্ৰম, আৰু অধিক অন্তৰ্ভুক্ত কৰি)।
যদি এটা শাৰীৰ ভিতৰত ১২ টাতকৈ অধিক স্তম্ভ ৰখা হয়, অতিৰিক্ত স্তম্ভৰ প্ৰতিটো গোটে, এটা একক হিচাপে, এটা নতুন শাৰীত ৰেপ কৰিব।
যিহেতু 9 + 4 = 13 > 12, এই 4-স্তম্ভ-বহল div এটা সংলগ্ন একক হিচাপে এটা নতুন ৰেখাত মেৰিয়াই দিয়া হয়।
পৰৱৰ্তী স্তম্ভসমূহ নতুন শাৰীটোৰ কাষেৰে চলি থাকে।
flexbox ত এটা নতুন শাৰীলৈ স্তম্ভ ভাঙিবলৈ এটা সৰু হেকৰ প্ৰয়োজন: width: 100%
আপুনি য'তেই আপোনাৰ স্তম্ভসমূহক এটা নতুন শাৰীত ৰেপ কৰিব বিচাৰে তাৰ সৈতে এটা উপাদান যোগ কৰক। সাধাৰণতে ইয়াক একাধিক .row
s ৰ সৈতে সম্পন্ন কৰা হয়, কিন্তু প্ৰতিটো প্ৰণয়ন পদ্ধতিয়ে ইয়াৰ বাবে হিচাপ দিব নোৱাৰে।
আপুনি আমাৰ প্ৰতিক্ৰিয়াশীল প্ৰদৰ্শন সঁজুলিসমূহৰ সৈতে নিৰ্দিষ্ট ব্ৰেকপইন্টসমূহত এই বিৰতি প্ৰয়োগ কৰিব পাৰে ।
আপোনাৰ বিষয়বস্তুৰ দৃশ্যমান ক্ৰম.order-
নিয়ন্ত্ৰণৰ বাবে শ্ৰেণীসমূহ ব্যৱহাৰ কৰক । এই শ্ৰেণীসমূহ প্ৰতিক্ৰিয়াশীল, গতিকে আপুনি ব্ৰেকপইন্টৰ দ্বাৰা সংহতি কৰিব পাৰে (যেনে, ). পাঁচোটা গ্ৰীড স্তৰৰ মাজেৰে মাধ্যমৰ বাবে সমৰ্থন অন্তৰ্ভুক্ত কৰা হৈছে ।order
.order-1.order-md-2
1
12
ইয়াৰ উপৰিও ৰেচপন্সিভ .order-first
আৰু ক্লাছ আছে যিয়ে ক্ৰমে আৰু ( ) প্ৰয়োগ কৰি এটা উপাদানৰ .order-last
পৰিৱৰ্তন কৰে । এই শ্ৰেণীসমূহক প্ৰয়োজন অনুসৰি সংখ্যাযুক্ত শ্ৰেণীসমূহৰ সৈতেও আন্তঃমিশ্ৰণ কৰিব পাৰি ।order
order: -1
order: 13
order: $columns + 1
.order-*
আপুনি গ্ৰীড স্তম্ভসমূহক দুটা ধৰণে অফছেট কৰিব পাৰে: আমাৰ প্ৰতিক্ৰিয়াশীল .offset-
গ্ৰীড শ্ৰেণীসমূহ আৰু আমাৰ মাৰ্জিন সঁজুলিসমূহ । গ্ৰীড শ্ৰেণীসমূহক স্তম্ভসমূহৰ সৈতে মিলাবলৈ আকাৰ দিয়া হয় আনহাতে মাৰ্জিনসমূহ দ্ৰুত পৰিকল্পনাসমূহৰ বাবে অধিক উপযোগী য'ত অফছেটৰ প্ৰস্থ পৰিৱৰ্তনশীল।
.offset-md-*
শ্ৰেণীসমূহ ব্যৱহাৰ কৰি স্তম্ভসমূহ সোঁফালে লৈ যাওক । এই শ্ৰেণীবোৰে এটা স্তম্ভৰ বাওঁফালৰ প্ৰান্ত স্তম্ভৰ দ্বাৰা বৃদ্ধি কৰে *
। উদাহৰণস্বৰূপে, চাৰিটা স্তম্ভৰ ওপৰেৰে .offset-md-4
গতি কৰে ।.col-md-4
প্ৰতিক্ৰিয়াশীল ব্ৰেকপইন্টসমূহত স্তম্ভ পৰিষ্কাৰ কৰাৰ উপৰিও, আপুনি অফছেটসমূহ পুনৰায় সেট কৰিব লাগিব। গ্ৰীড উদাহৰণত এইটো কাৰ্য্যত চাওক ।
v4 ত flexbox লৈ যোৱাৰ সৈতে, আপুনি মাৰ্জিন সঁজুলিসমূহ ব্যৱহাৰ কৰিব পাৰে যেনে .mr-auto
ভাই-ভনী স্তম্ভসমূহক ইটোৱে সিটোৰ পৰা আঁতৰাই ৰাখিবলৈ বাধ্য কৰা।
অবিকল্পিত গ্ৰীডৰ সৈতে আপোনাৰ বিষয়বস্তু নেষ্ট কৰিবলে, এটা বৰ্ত্তমানৰ স্তম্ভৰ ভিতৰত এটা নতুন .row
আৰু স্তম্ভৰ গোট যোগ কৰক । নেষ্টেড শাৰীসমূহে স্তম্ভসমূহৰ এটা গোট অন্তৰ্ভুক্ত কৰিব লাগে যি ১২ বা তাতকৈ কম যোগ কৰে (আপুনি সকলো ১২টা উপলব্ধ স্তম্ভ ব্যৱহাৰ কৰাৰ প্ৰয়োজন নাই)।.col-sm-*
.col-sm-*
Bootstrap ৰ উৎস Sass নথিপত্ৰসমূহ ব্যৱহাৰ কৰাৰ সময়ত, আপোনাৰ ওচৰত Sass চলকসমূহ আৰু মিক্সিনসমূহ ব্যৱহাৰ কৰাৰ বিকল্প আছে স্বনিৰ্বাচিত, অৰ্থবোধক, আৰু প্ৰতিক্ৰিয়াশীল পৃষ্ঠা পৰিকল্পনা সৃষ্টি কৰিবলে। আমাৰ পূৰ্বনিৰ্ধাৰিত গ্ৰীড শ্ৰেণীসমূহে দ্ৰুত প্ৰতিক্ৰিয়াশীল পৰিকল্পনাসমূহৰ বাবে ব্যৱহাৰৰ বাবে প্ৰস্তুত শ্ৰেণীসমূহৰ এটা সম্পূৰ্ণ চুইট প্ৰদান কৰিবলৈ এই একেবোৰ চলক আৰু মিক্সিনসমূহ ব্যৱহাৰ কৰে।
চলক আৰু মেপসমূহে স্তম্ভসমূহৰ সংখ্যা, নালাৰ প্ৰস্থ, আৰু মাধ্যম প্ৰশ্ন বিন্দু নিৰ্ধাৰণ কৰে য'ত ভাসমান স্তম্ভসমূহ আৰম্ভ কৰিব লাগে। আমি ওপৰত নথিভুক্ত কৰা পূৰ্বনিৰ্ধাৰিত গ্ৰীড শ্ৰেণীসমূহ সৃষ্টি কৰিবলৈ, লগতে তলত তালিকাভুক্ত স্বনিৰ্বাচিত মিক্সিনসমূহৰ বাবে এইবোৰ ব্যৱহাৰ কৰো।
ব্যক্তিগত গ্ৰীড স্তম্ভসমূহৰ বাবে অৰ্থগত CSS সৃষ্টি কৰিবলৈ মিক্সিনসমূহ গ্ৰীড চলকসমূহৰ সৈতে সংযুক্তভাৱে ব্যৱহাৰ কৰা হয়।
আপুনি চলকসমূহক আপোনাৰ নিজৰ স্বনিৰ্বাচিত মানসমূহলে পৰিবৰ্তন কৰিব পাৰে, বা কেৱল মিক্সিনসমূহ সিহতৰ অবিকল্পিত মানসমূহৰ সৈতে ব্যৱহাৰ কৰক। মাজত এটা ব্যৱধান থকা এটা দুটা-স্তম্ভ পৰিকল্পনা সৃষ্টি কৰিবলে অবিকল্পিত সংহতিসমূহ ব্যৱহাৰ কৰাৰ এটা উদাহৰণ ইয়াত দিয়া হৈছে।
আমাৰ বিল্ট-ইন গ্ৰীড Sass চলক আৰু মেপসমূহ ব্যৱহাৰ কৰি, পূৰ্বনিৰ্ধাৰিত গ্ৰীড শ্ৰেণীসমূহ সম্পূৰ্ণৰূপে কাষ্টমাইজ কৰা সম্ভৱ। স্তৰসমূহৰ সংখ্যা, মাধ্যম প্ৰশ্ন মাত্ৰাসমূহ, আৰু ধাৰকৰ প্ৰস্থসমূহ সলনি কৰক—তাৰ পিছত পুনৰ সংকলন কৰক।
গ্ৰীড স্তম্ভৰ সংখ্যা Sass চলকৰ জৰিয়তে পৰিবৰ্তন কৰিব পাৰি। স্তম্ভৰ নালাৰ বাবে প্ৰস্থ নিৰ্ধাৰণ কৰাৰ $grid-columns
সময়ত প্ৰতিটো ব্যক্তিগত স্তম্ভৰ প্ৰস্থ (শতাংশত) সৃষ্টি কৰিবলৈ ব্যৱহাৰ কৰা হয় ।$grid-gutter-width
স্তম্ভসমূহৰ বাহিৰলৈ গৈ, আপুনি গ্ৰীড স্তৰসমূহৰ সংখ্যাও স্বনিৰ্বাচিত কৰিব পাৰে। যদি আপুনি মাত্ৰ চাৰিটা গ্ৰীড টায়াৰ বিচাৰে, আপুনি $grid-breakpoints
আৰু $container-max-widths
এনেকুৱা কিবা এটালৈ আপডেইট কৰিব:
Sass চলকসমূহ বা মেপসমূহত যিকোনো পৰিবৰ্তন কৰাৰ সময়ত, আপুনি আপোনাৰ পৰিবৰ্তনসমূহ সংৰক্ষণ কৰিব লাগিব আৰু পুনৰ সংকলন কৰিব লাগিব। তেনে কৰিলে স্তম্ভৰ প্ৰস্থ, অফছেটসমূহ, আৰু ক্ৰমৰ বাবে পূৰ্বনিৰ্ধাৰিত গ্ৰীড শ্ৰেণীসমূহৰ এটা নতুন ছেট আউটপুট হ'ব। স্বনিৰ্বাচিত ব্ৰেকপইন্টসমূহ ব্যৱহাৰ কৰিবলৈ প্ৰতিক্ৰিয়াশীল দৃশ্যমানতা সঁজুলিসমূহো আপডেট কৰা হ’ব। px
গ্ৰীড মানসমূহ (নহয় rem
, em
, বা %
) ত সংহতি কৰাটো নিশ্চিত কৰক ।