CSS கட்டம்

பூட்ஸ்டார்ப்பின் இயல்புநிலை கிரிட் அமைப்பு, மில்லியன் கணக்கான மக்களால் முயற்சி செய்து சோதிக்கப்பட்ட ஒரு தசாப்தத்திற்கும் மேலான CSS தளவமைப்பு நுட்பங்களின் உச்சக்கட்டத்தைக் குறிக்கிறது. ஆனால், புதிய CSS கிரிட் போன்ற உலாவிகளில் நாம் பார்க்கும் நவீன CSS அம்சங்கள் மற்றும் நுட்பங்கள் இல்லாமல் இது உருவாக்கப்பட்டது.

எப்படி இது செயல்படுகிறது

பூட்ஸ்டார்ப் 5 உடன், CSS கிரிட்டில் கட்டமைக்கப்பட்ட, ஆனால் பூட்ஸ்டார்ப் திருப்பத்துடன் கூடிய தனி கட்ட அமைப்பை இயக்குவதற்கான விருப்பத்தைச் சேர்த்துள்ளோம். நீங்கள் பதிலளிக்கக்கூடிய தளவமைப்புகளை உருவாக்க விருப்பத்தின் பேரில் விண்ணப்பிக்கலாம், ஆனால் பேட்டைக்கு கீழ் வேறுபட்ட அணுகுமுறையுடன் நீங்கள் இன்னும் வகுப்புகளைப் பெறுவீர்கள்.

• CSS கட்டம் தேர்வு செய்யப்பட்டுள்ளது. அமைப்பதன் மூலம் இயல்புநிலை கட்ட அமைப்பை முடக்கவும் $enable-grid-classes: falseமற்றும் அமைப்பதன் மூலம் CSS கட்டத்தை இயக்கவும் $enable-cssgrid: true. பின்னர், உங்கள் சாஸை மீண்டும் தொகுக்கவும்.

• இன் நிகழ்வுகளை .rowஉடன் மாற்றவும் .grid. உங்கள் HTML உடன் நீங்கள் உருவாக்கக்கூடிய ஒன்றை வகுப்பு .gridஅமைத்து display: gridஉருவாக்குகிறது .grid-template

• .col-*வகுப்புகளை வகுப்புகளுடன் மாற்றவும் .g-col-*. ஏனென்றால், எங்களின் CSS கிரிட் நெடுவரிசைகள் grid-columnக்கு பதிலாக பண்பைப் பயன்படுத்துகின்றன width.

• நெடுவரிசைகள் மற்றும் சாக்கடை அளவுகள் CSS மாறிகள் மூலம் அமைக்கப்பட்டுள்ளன. பெற்றோரில் இவற்றை அமைத்து , .gridஇன்லைன் அல்லது ஸ்டைல்ஷீட்டில் எப்படி வேண்டுமானாலும் தனிப்பயனாக்கவும் .--bs-columns--bs-gap

எதிர்காலத்தில், பூட்ஸ்டார்ப் ஒரு கலப்பின தீர்வுக்கு gapமாறக்கூடும், ஏனெனில் ஃப்ளெக்ஸ்பாக்ஸிற்கான முழு உலாவி ஆதரவையும் சொத்து அடைந்துள்ளது.

முக்கிய வேறுபாடுகள்

இயல்புநிலை கட்ட அமைப்புடன் ஒப்பிடும்போது:

• Flex பயன்பாடுகள் 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 கிரிட் எளிதாக கூடு கட்ட அனுமதிக்கிறது .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. gaps இல் பயன்படுத்துகிறோம் .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>