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ಭವಿಷ್ಯದಲ್ಲಿ, ಆಸ್ತಿಯು ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ಗೆ ಸಂಪೂರ್ಣ ಬ್ರೌಸರ್ ಬೆಂಬಲವನ್ನು ಸಾಧಿಸಿರುವುದರಿಂದ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಹೈಬ್ರಿಡ್ ಪರಿಹಾರಕ್ಕೆ ಬದಲಾಗಬಹುದು .

ಪ್ರಮುಖ ವ್ಯತ್ಯಾಸಗಳು

ಡೀಫಾಲ್ಟ್ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್‌ಗೆ ಹೋಲಿಸಿದರೆ:

• ಫ್ಲೆಕ್ಸ್ ಉಪಯುಕ್ತತೆಗಳು ಅದೇ ರೀತಿಯಲ್ಲಿ CSS ಗ್ರಿಡ್ ಕಾಲಮ್‌ಗಳ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ.

• ಅಂತರವು ಗಟಾರಗಳನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ. ಆಸ್ತಿಯು ನಮ್ಮ ಡೀಫಾಲ್ಟ್ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್‌ನಿಂದ gapಸಮತಲವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ paddingಮತ್ತು ಹೆಚ್ಚು ಹಾಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ margin.

• ಅಂತೆಯೇ, s ಗಿಂತ ಭಿನ್ನವಾಗಿ .row, .gridರು ಯಾವುದೇ ಋಣಾತ್ಮಕ ಅಂಚುಗಳನ್ನು ಹೊಂದಿಲ್ಲ ಮತ್ತು ಗ್ರಿಡ್ ಗಟರ್‌ಗಳನ್ನು ಬದಲಾಯಿಸಲು ಮಾರ್ಜಿನ್ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಲಾಗುವುದಿಲ್ಲ. ಗ್ರಿಡ್ ಅಂತರವನ್ನು ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಅಡ್ಡಲಾಗಿ ಮತ್ತು ಲಂಬವಾಗಿ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ. ಹೆಚ್ಚಿನ ವಿವರಗಳಿಗಾಗಿ ಗ್ರಾಹಕೀಕರಣ ವಿಭಾಗವನ್ನು ನೋಡಿ .

• ಇನ್‌ಲೈನ್ ಮತ್ತು ಕಸ್ಟಮ್ ಶೈಲಿಗಳನ್ನು ಮಾರ್ಪಡಿಸುವ ವರ್ಗಗಳಿಗೆ ಬದಲಿಯಾಗಿ ನೋಡಬೇಕು (ಉದಾ, 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>

ಸ್ವಯಂ ಕಾಲಮ್‌ಗಳು

ಗ್ರಿಡ್ ಐಟಂಗಳಲ್ಲಿ ಯಾವುದೇ ತರಗತಿಗಳು ಇಲ್ಲದಿದ್ದಾಗ (ಎ ಯ ತಕ್ಷಣದ ಮಕ್ಕಳು .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. gapನಾವು s ನಲ್ಲಿ ಬಳಸುತ್ತೇವೆ .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 ನಲ್ಲಿ ರಚಿಸಲಾದ ವರ್ಗಗಳ ಸಂಖ್ಯೆಯನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಪೂರ್ವನಿರ್ಧರಿಸುತ್ತದೆ. ನಿಮಗೆ ಇಲ್ಲಿ ಎರಡು ಆಯ್ಕೆಗಳಿವೆ:

• ಆ ಡೀಫಾಲ್ಟ್ ಸಾಸ್ ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಮಾರ್ಪಡಿಸಿ ಮತ್ತು ನಿಮ್ಮ 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>