CSS গ্ৰীড

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

কেনেকৈ কাম কৰে

বুটষ্ট্ৰেপ ৫ ৰ সৈতে, আমি এটা পৃথক গ্ৰীড ব্যৱস্থাপ্ৰণালী সামৰ্থবান কৰাৰ বিকল্প যোগ কৰিছো যি CSS গ্ৰীডত নিৰ্মিত, কিন্তু এটা বুটষ্ট্ৰেপ টুইষ্টৰ সৈতে । আপুনি এতিয়াও প্ৰতিক্ৰিয়াশীল বিন্যাস নিৰ্মাণ কৰিবলৈ আপুনি এটা হুইমত প্ৰয়োগ কৰিব পৰা ক্লাছ পায়, কিন্তু হুডৰ তলত এটা বেলেগ পদ্ধতিৰ সৈতে।

• CSS Grid হৈছে অপ্ট-ইন। অবিকল্পিত গ্ৰীড ব্যৱস্থাপ্ৰণালী সংহতি কৰি নিষ্ক্ৰিয় কৰক $enable-grid-classes: falseআৰু সংহতি কৰি CSS গ্ৰীড সামৰ্থবান কৰক $enable-cssgrid: true। তাৰ পিছত, আপোনাৰ Sass পুনৰ কম্পাইল কৰক।

• ৰ উদাহৰণসমূহ সলনি .rowকৰক .grid। শ্ৰেণীটোৱে এটা .gridছেট কৰে display: gridআৰু সৃষ্টি কৰে grid-templateযিটো আপুনি আপোনাৰ HTML ৰ সৈতে নিৰ্মাণ কৰে।

• .col-*ক্লাছৰ ঠাইত ক্লাছ সলনি কৰক .g-col-*। কাৰণ আমাৰ CSS Grid স্তম্ভসমূহে ৰ grid-columnপৰিবৰ্তে বৈশিষ্ট্যটো ব্যৱহাৰ কৰে width।

• স্তম্ভ আৰু নালাৰ আকাৰ CSS চলকসমূহৰ যোগেদি সংহতি কৰা হয়। এইবোৰ মূলত সংহতি কৰক .gridআৰু আপুনি বিচৰা ধৰণে স্বনিৰ্বাচিত কৰক, ইনলাইন বা এটা শৈলীপত্ৰিকাত, --bs-columnsআৰু ৰ সৈতে --bs-gap।

ভৱিষ্যতে, Bootstrap সম্ভৱতঃ এটা হাইব্ৰিড সমাধানলৈ স্থানান্তৰিত হ'ব কাৰণ gapবৈশিষ্ট্যই flexbox ৰ বাবে প্ৰায় সম্পূৰ্ণ ব্ৰাউজাৰ সমৰ্থন লাভ কৰিছে।

মূল পাৰ্থক্যসমূহ

অবিকল্পিত গ্ৰীড ব্যৱস্থাপ্ৰণালীৰ সৈতে তুলনা কৰা হৈছে:

• ফ্লেক্স সঁজুলিসমূহে CSS গ্ৰীড স্তম্ভসমূহক একে ধৰণে প্ৰভাৱিত নকৰে।

• ফাঁকবোৰে নালাবোৰৰ ঠাই লয়। বৈশিষ্ট্যই আমাৰ অবিকল্পিত গ্ৰীড ব্যৱস্থাপ্ৰণালীৰ পৰা gapঅনুভূমিক সলনি কৰে আৰু অধিক কাৰ্য্য কৰে .paddingmargin

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

• ইনলাইন আৰু স্বনিৰ্বাচিত শৈলীসমূহক পৰিবৰ্তক শ্ৰেণীসমূহৰ বাবে প্ৰতিস্থাপন হিচাপে চাব লাগে (যেনে, style="--bs-columns: 3;"vs 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. ষ্টাৰ্ট ক্লাছবোৰ প্ৰথমটোৰ বাবে চৰ্টহেণ্ড। আপোনাৰ স্তম্ভসমূহৰ আকাৰ আৰু আপুনি প্ৰয়োজন অনুসৰি প্ৰান্তিককৰণ কৰিবলে সিহতক স্তম্ভ শ্ৰেণীসমূহৰ সৈতে যোৰ কৰক। আৰম্ভ শ্ৰেণীসমূহ আৰম্ভ হয় 1as 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>

স্বয়ংক্ৰিয় স্তম্ভ

যেতিয়া গ্ৰীড বস্তুসমূহত কোনো শ্ৰেণী নাথাকে (এটা ৰ তাৎক্ষণিক সন্তান .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 Grid শাৰীসমূহৰ বাবে ব্যৱহাৰ কৰো, যিয়ে আওকাণ কৰে --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>