CSS গ্রিড

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

কিভাবে এটা কাজ করে

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

• CSS গ্রিড অপ্ট-ইন করা হয়েছে। সেট করে ডিফল্ট গ্রিড সিস্টেম অক্ষম করুন $enable-grid-classes: falseএবং সেট করে CSS গ্রিড সক্রিয় করুন $enable-cssgrid: true। তারপর, আপনার Sass পুনরায় কম্পাইল.

• .rowএর সাথে দৃষ্টান্তগুলি প্রতিস্থাপন করুন .grid। .gridক্লাস সেট করে display: gridএবং তৈরি করে grid-templateযা আপনি আপনার HTML দিয়ে তৈরি করেন।

• .col-*ক্লাস দিয়ে ক্লাস প্রতিস্থাপন করুন .g-col-*। কারণ আমাদের CSS গ্রিড কলামগুলি grid-columnএর পরিবর্তে সম্পত্তি ব্যবহার করে width।

• কলাম এবং নর্দমার আকার CSS ভেরিয়েবলের মাধ্যমে সেট করা হয়। এগুলিকে অভিভাবকের উপর সেট করুন .gridএবং আপনি যেভাবে চান তা কাস্টমাইজ করুন, ইনলাইনে বা একটি স্টাইলশীটে, --bs-columnsএবং সহ --bs-gap৷

ভবিষ্যতে, বুটস্ট্র্যাপ সম্ভবত একটি হাইব্রিড সমাধানে স্থানান্তরিত হবে কারণ gapসম্পত্তিটি ফ্লেক্সবক্সের জন্য প্রায় সম্পূর্ণ ব্রাউজার সমর্থন অর্জন করেছে।

মূল পার্থক্য

ডিফল্ট গ্রিড সিস্টেমের তুলনায়:

• ফ্লেক্স ইউটিলিটিগুলি একইভাবে CSS গ্রিড কলামগুলিকে প্রভাবিত করে না।

• ফাঁক গটার প্রতিস্থাপন. সম্পত্তি আমাদের ডিফল্ট গ্রিড সিস্টেম থেকে gapঅনুভূমিক প্রতিস্থাপন করে এবং এর মতো আরও কাজ করে ।paddingmargin

• যেমন, s-এর বিপরীতে .row, .grids-এর কোনো ঋণাত্মক মার্জিন নেই এবং মার্জিন ইউটিলিটিগুলি গ্রিডের গটারগুলি পরিবর্তন করতে ব্যবহার করা যাবে না। ডিফল্টরূপে গ্রিড ফাঁক অনুভূমিকভাবে এবং উল্লম্বভাবে প্রয়োগ করা হয়। আরও বিস্তারিত জানার জন্য কাস্টমাইজিং বিভাগটি দেখুন ।

• ইনলাইন এবং কাস্টম শৈলীগুলিকে সংশোধক ক্লাসগুলির প্রতিস্থাপন হিসাবে দেখা উচিত (যেমন, style="--bs-columns: 3;"বনাম class="row-cols-3")।

• নেস্টিং একইভাবে কাজ করে, তবে আপনাকে নেস্টেডের প্রতিটি দৃষ্টান্তে আপনার কলামের সংখ্যা পুনরায় সেট করতে হতে পারে .grid। বিস্তারিত জানার জন্য নেস্টিং বিভাগটি দেখুন ।

উদাহরণ

তিনটি কলাম

.g-col-4ক্লাস ব্যবহার করে সমস্ত ভিউপোর্ট এবং ডিভাইস জুড়ে তিনটি সমান-প্রস্থ কলাম তৈরি করা যেতে পারে । ভিউপোর্ট সাইজ অনুযায়ী লেআউট পরিবর্তন করতে প্রতিক্রিয়াশীল ক্লাস যোগ করুন।

<div class="grid text-center">
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
</div>

প্রতিক্রিয়াশীল

ভিউপোর্ট জুড়ে আপনার লেআউট সামঞ্জস্য করতে প্রতিক্রিয়াশীল ক্লাস ব্যবহার করুন। এখানে আমরা সরুতম ভিউপোর্টে দুটি কলাম দিয়ে শুরু করি এবং তারপর মাঝারি ভিউপোর্টে এবং তার উপরে তিনটি কলামে বৃদ্ধি পাই।

<div class="grid text-center">
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
</div>

সমস্ত ভিউপোর্টে এই দুটি কলাম লেআউটের সাথে তুলনা করুন।

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

মোড়ানো

অনুভূমিকভাবে আর জায়গা না থাকলে গ্রিড আইটেমগুলি স্বয়ংক্রিয়ভাবে পরবর্তী লাইনে মোড়ানো হয়। নোট করুন যে gapগ্রিড আইটেমগুলির মধ্যে অনুভূমিক এবং উল্লম্ব ফাঁকগুলিতে প্রযোজ্য।

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

শুরু হয়

স্টার্ট ক্লাসের লক্ষ্য আমাদের ডিফল্ট গ্রিডের অফসেট ক্লাসগুলিকে প্রতিস্থাপন করা, কিন্তু সেগুলি সম্পূর্ণরূপে এক নয়৷ CSS গ্রিড স্টাইলগুলির মাধ্যমে একটি গ্রিড টেমপ্লেট তৈরি করে যা ব্রাউজারকে "এই কলামে শুরু" এবং "এই কলামে শেষ" করতে বলে। সেই বৈশিষ্ট্যগুলি হল grid-column-startএবং grid-column-end. প্রারম্ভিক ক্লাস প্রাক্তন জন্য সংক্ষিপ্ত হয়. সেগুলিকে কলাম ক্লাসের সাথে পেয়ার করুন এবং আপনার কলামগুলিকে আপনার প্রয়োজন অনুযায়ী সারিবদ্ধ করুন৷ এই বৈশিষ্ট্যগুলির জন্য একটি অবৈধ মান 1হিসাবে ক্লাস শুরু করুন ৷0

<div class="grid text-center">
  <div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
  <div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
</div>

স্বয়ংক্রিয় কলাম

যখন গ্রিড আইটেমগুলিতে কোন ক্লাস না থাকে (a এর তাৎক্ষণিক সন্তান .grid), প্রতিটি গ্রিড আইটেম স্বয়ংক্রিয়ভাবে একটি কলামে আকারে পরিণত হবে।

<div class="grid text-center">
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

এই আচরণ গ্রিড কলাম ক্লাসের সাথে মিশ্রিত করা যেতে পারে।

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

বাসা বাঁধে

আমাদের ডিফল্ট গ্রিড সিস্টেমের মতো, আমাদের CSS গ্রিড .grids এর সহজে নেস্ট করার অনুমতি দেয়। যাইহোক, ডিফল্টের বিপরীতে, এই গ্রিডটি সারি, কলাম এবং ফাঁকে পরিবর্তনগুলি উত্তরাধিকার সূত্রে পায়। নীচের উদাহরণ বিবেচনা করুন:

• আমরা একটি স্থানীয় CSS ভেরিয়েবলের সাথে কলামের ডিফল্ট সংখ্যাকে ওভাররাইড করি: --bs-columns: 3.
• প্রথম স্বয়ংক্রিয়-কলামে, কলামের সংখ্যা উত্তরাধিকারসূত্রে প্রাপ্ত হয় এবং প্রতিটি কলাম উপলব্ধ প্রস্থের এক-তৃতীয়াংশ।
• দ্বিতীয় স্বয়ংক্রিয়-কলামে, আমরা নেস্টে থাকা কলামের সংখ্যা .grid12 (আমাদের ডিফল্ট) এ পুনরায় সেট করেছি।
• তৃতীয় স্বয়ংক্রিয়-কলামে কোনো নেস্টেড সামগ্রী নেই।

অনুশীলনে এটি আমাদের ডিফল্ট গ্রিড সিস্টেমের তুলনায় আরও জটিল এবং কাস্টম লেআউটের জন্য অনুমতি দেয়।

<div class="grid text-center" style="--bs-columns: 3;">
  <div>
    First auto-column
    <div class="grid">
      <div>Auto-column</div>
      <div>Auto-column</div>
    </div>
  </div>
  <div>
    Second auto-column
    <div class="grid" style="--bs-columns: 12;">
      <div class="g-col-6">6 of 12</div>
      <div class="g-col-4">4 of 12</div>
      <div class="g-col-2">2 of 12</div>
    </div>
  </div>
  <div>Third auto-column</div>
</div>

কাস্টমাইজ করা

স্থানীয় CSS ভেরিয়েবলের সাথে কলামের সংখ্যা, সারির সংখ্যা এবং ফাঁকের প্রস্থ কাস্টমাইজ করুন।

এই CSS ভেরিয়েবলের কোন ডিফল্ট মান নেই; পরিবর্তে, তারা ফলব্যাক মান প্রয়োগ করে যা স্থানীয় উদাহরণ প্রদান না করা পর্যন্ত ব্যবহৃত হয়। উদাহরণস্বরূপ, আমরা var(--bs-rows, 1)আমাদের CSS গ্রিড সারিগুলির জন্য ব্যবহার করি, যা উপেক্ষা করে --bs-rowsকারণ এটি এখনও কোথাও সেট করা হয়নি। একবার এটি হয়ে গেলে, .gridদৃষ্টান্তটি ফলব্যাক মানের পরিবর্তে সেই মানটি ব্যবহার করবে 1।

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

তাৎক্ষণিক শিশুদের উপাদানগুলি হল গ্রিড আইটেম, তাই স্পষ্টভাবে একটি ক্লাস .gridযোগ না করেই তাদের আকার দেওয়া হবে ।.g-col

<div class="grid text-center" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

কলাম এবং ফাঁক

কলামের সংখ্যা এবং ফাঁক সামঞ্জস্য করুন।

<div class="grid text-center" style="--bs-columns: 4; --bs-gap: 5rem;">
  <div class="g-col-2">.g-col-2</div>
  <div class="g-col-2">.g-col-2</div>
</div>

<div class="grid text-center" style="--bs-columns: 10; --bs-gap: 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-4">.g-col-4</div>
</div>

সারি যোগ করা হচ্ছে

আরও সারি যোগ করা এবং কলামের স্থান পরিবর্তন করা:

<div class="grid text-center" style="--bs-rows: 3; --bs-columns: 3;">
  <div>Auto-column</div>
  <div class="g-start-2" style="grid-row: 2">Auto-column</div>
  <div class="g-start-3" style="grid-row: 3">Auto-column</div>
</div>

ফাঁক

শুধুমাত্র পরিবর্তন করে উল্লম্ব ফাঁক পরিবর্তন করুন row-gap. মনে রাখবেন যে আমরা s ব্যবহার করি gap, .gridকিন্তু row-gapএবং column-gapপ্রয়োজন অনুসারে পরিবর্তন করা যেতে পারে।

<div class="grid text-center" style="row-gap: 0;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

এর কারণে, আপনার কাছে বিভিন্ন উল্লম্ব এবং অনুভূমিক gaps থাকতে পারে, যা একটি একক মান (সব দিক) বা এক জোড়া মান (উল্লম্ব এবং অনুভূমিক) নিতে পারে। gapএটির জন্য একটি ইনলাইন শৈলী বা আমাদের --bs-gapCSS ভেরিয়েবলের সাথে প্রয়োগ করা যেতে পারে ।

<div class="grid text-center" style="--bs-gap: .25rem 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

সস

CSS গ্রিডের একটি সীমাবদ্ধতা হল যে আমাদের ডিফল্ট ক্লাসগুলি এখনও দুটি Sass ভেরিয়েবল দ্বারা তৈরি হয়, $grid-columnsএবং $grid-gutter-width. এটি কার্যকরভাবে আমাদের সংকলিত CSS-এ উৎপন্ন ক্লাসের সংখ্যা পূর্বনির্ধারণ করে। আপনার এখানে দুটি বিকল্প আছে:

• সেই ডিফল্ট Sass ভেরিয়েবল পরিবর্তন করুন এবং আপনার CSS পুনরায় কম্পাইল করুন।
• প্রদত্ত ক্লাস বাড়ানোর জন্য ইনলাইন বা কাস্টম শৈলী ব্যবহার করুন।

উদাহরণস্বরূপ, আপনি কলামের সংখ্যা বাড়াতে পারেন এবং ফাঁকের আকার পরিবর্তন করতে পারেন, এবং তারপর ইনলাইন শৈলী এবং পূর্বনির্ধারিত CSS গ্রিড কলাম ক্লাসের মিশ্রণের সাথে আপনার "কলামগুলি" আকার দিতে পারেন (যেমন, .g-col-4)।

<div class="grid text-center" style="--bs-columns: 18; --bs-gap: .5rem;">
  <div style="grid-column: span 14;">14 columns</div>
  <div class="g-col-4">.g-col-4</div>
</div>