CSS ഗ്രിഡ്

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഡിഫോൾട്ട് ഗ്രിഡ് സിസ്റ്റം, ദശലക്ഷക്കണക്കിന് ആളുകൾ പരീക്ഷിക്കുകയും പരീക്ഷിക്കുകയും ചെയ്‌ത, ഒരു ദശാബ്ദത്തിലേറെയുള്ള CSS ലേഔട്ട് ടെക്‌നിക്കുകളുടെ പരിസമാപ്തിയെ പ്രതിനിധീകരിക്കുന്നു. പക്ഷേ, പുതിയ CSS ഗ്രിഡ് പോലെയുള്ള ബ്രൗസറുകളിൽ നമ്മൾ കാണുന്ന പല ആധുനിക CSS ഫീച്ചറുകളും ടെക്നിക്കുകളും ഇല്ലാതെയാണ് ഇത് സൃഷ്ടിച്ചിരിക്കുന്നത്.

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു

ബൂട്ട്‌സ്‌ട്രാപ്പ് 5-നൊപ്പം, CSS ഗ്രിഡിൽ നിർമ്മിച്ച ഒരു പ്രത്യേക ഗ്രിഡ് സിസ്റ്റം പ്രവർത്തനക്ഷമമാക്കാനുള്ള ഓപ്ഷൻ ഞങ്ങൾ ചേർത്തിട്ടുണ്ട്, എന്നാൽ ബൂട്ട്‌സ്‌ട്രാപ്പ് ട്വിസ്റ്റ്. പ്രതികരിക്കുന്ന ലേഔട്ടുകൾ നിർമ്മിക്കുന്നതിന് നിങ്ങൾക്ക് താൽപ്പര്യമനുസരിച്ച് അപേക്ഷിക്കാൻ കഴിയുന്ന ക്ലാസുകൾ നിങ്ങൾക്ക് ഇപ്പോഴും ലഭിക്കുന്നു, എന്നാൽ ഹുഡിന്റെ കീഴിൽ മറ്റൊരു സമീപനം.

• CSS ഗ്രിഡ് ഓപ്റ്റ്-ഇൻ ആണ്. സജ്ജീകരിച്ച് സ്ഥിരസ്ഥിതി ഗ്രിഡ് സിസ്റ്റം $enable-grid-classes: falseപ്രവർത്തനരഹിതമാക്കുകയും സജ്ജീകരിച്ച് CSS ഗ്രിഡ് പ്രവർത്തനക്ഷമമാക്കുകയും ചെയ്യുക $enable-cssgrid: true. തുടർന്ന്, നിങ്ങളുടെ സാസ് വീണ്ടും കംപൈൽ ചെയ്യുക.

• എന്നതിന്റെ ഉദാഹരണങ്ങൾ .rowമാറ്റിസ്ഥാപിക്കുക .grid. ക്ലാസ് .gridസജ്ജമാക്കുകയും നിങ്ങളുടെ HTML ഉപയോഗിച്ച് നിർമ്മിക്കുകയും ചെയ്യുന്നു display: grid.grid-template

• .col-*ക്ലാസുകൾ ഉപയോഗിച്ച് ക്ലാസുകൾ മാറ്റിസ്ഥാപിക്കുക .g-col-*. ഞങ്ങളുടെ CSS ഗ്രിഡ് നിരകൾ എന്നതിന് grid-columnപകരം പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നതിനാലാണിത് width.

• നിരകളും ഗട്ടർ വലുപ്പങ്ങളും CSS വേരിയബിളുകൾ വഴി സജ്ജീകരിച്ചിരിക്കുന്നു. ഇവ രക്ഷിതാവിൽ സജ്ജീകരിച്ച് .gridനിങ്ങൾക്ക് ഇഷ്ടമുള്ള രീതിയിൽ ഇൻലൈനിലോ സ്റ്റൈൽഷീറ്റിലോ --bs-columnsഇഷ്‌ടാനുസൃതമാക്കുക --bs-gap.

gapഭാവിയിൽ, ഫ്ലെക്‌സ്‌ബോക്‌സിനായി പ്രോപ്പർട്ടി പൂർണ്ണമായ ബ്രൗസർ പിന്തുണ നേടിയതിനാൽ ബൂട്ട്‌സ്‌ട്രാപ്പ് ഒരു ഹൈബ്രിഡ് പരിഹാരത്തിലേക്ക് മാറാൻ സാധ്യതയുണ്ട് .

പ്രധാന വ്യത്യാസങ്ങൾ

സ്ഥിരസ്ഥിതി ഗ്രിഡ് സിസ്റ്റവുമായി താരതമ്യം ചെയ്യുമ്പോൾ:

• ഫ്ലെക്സ് യൂട്ടിലിറ്റികൾ 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. ക്ലാസുകൾ ആരംഭിക്കുക എന്നത് ആദ്യത്തേതിന്റെ ചുരുക്കെഴുത്താണ്. നിങ്ങൾക്ക് ആവശ്യമുള്ളത് പോലെ നിങ്ങളുടെ നിരകളുടെ വലുപ്പത്തിനും വിന്യസിക്കുന്നതിനും കോളം ക്ലാസുകളുമായി അവയെ ജോടിയാക്കുക. ഈ പ്രോപ്പർട്ടികൾക്കുള്ള ഒരു അസാധുവായ മൂല്യമായതിനാൽ 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 ഗ്രിഡ് എളുപ്പത്തിൽ കൂടുണ്ടാക്കാൻ അനുവദിക്കുന്നു .grid. എന്നിരുന്നാലും, ഡിഫോൾട്ടിൽ നിന്ന് വ്യത്യസ്തമായി, ഈ ഗ്രിഡ് വരികളിലും നിരകളിലും വിടവുകളിലും മാറ്റങ്ങൾ വരുത്തുന്നു. ചുവടെയുള്ള ഉദാഹരണം പരിഗണിക്കുക:

• ഒരു ലോക്കൽ 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, എന്നാൽ ആവശ്യാനുസരണം പരിഷ്‌ക്കരിക്കാവുന്നതുമാണ്..gridrow-gapcolumn-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>