CSS ग्रिड

उदाहरणहरू र कोड स्निपेटहरू सहित CSS ग्रिडमा निर्मित हाम्रो वैकल्पिक लेआउट प्रणाली कसरी सक्षम गर्ने, प्रयोग गर्ने र अनुकूलन गर्ने सिक्नुहोस्।

यस पृष्ठमा

बुटस्ट्र्यापको पूर्वनिर्धारित ग्रिड प्रणालीले लाखौं मानिसहरूले प्रयास गरेको र परीक्षण गरेको CSS लेआउट प्रविधिहरूको एक दशकभन्दा बढीको परिणतिलाई प्रतिनिधित्व गर्दछ। तर, यो हामीले नयाँ CSS ग्रिड जस्ता ब्राउजरहरूमा देखिरहेका धेरै आधुनिक CSS सुविधाहरू र प्रविधिहरू बिना पनि सिर्जना गरिएको थियो।

हेड अप—हाम्रो CSS ग्रिड प्रणाली प्रयोगात्मक छ र v5.1.0 को रूपमा अप्ट-इन छ! हामीले यसलाई तपाइँको लागि प्रदर्शन गर्नको लागि हाम्रो कागजातको CSS मा समावेश गर्यौं, तर यो पूर्वनिर्धारित रूपमा असक्षम गरिएको छ। तपाइँका परियोजनाहरूमा यसलाई कसरी सक्षम पार्ने भनेर जान्नको लागि पढ्न जारी राख्नुहोस्।

यसले कसरी काम गर्छ

Bootstrap 5 को साथ, हामीले CSS ग्रिडमा निर्मित छुट्टै ग्रिड प्रणाली सक्षम गर्ने विकल्प थपेका छौं, तर बुटस्ट्र्याप ट्विस्टसँग। तपाइँ अझै पनि कक्षाहरू प्राप्त गर्नुहुन्छ जुन तपाइँ उत्तरदायी लेआउटहरू निर्माण गर्नको लागि आवेदन गर्न सक्नुहुन्छ, तर हुड अन्तर्गत फरक दृष्टिकोणको साथ।

CSS ग्रिड अप्ट-इन छ। सेटिङ गरेर पूर्वनिर्धारित ग्रिड प्रणाली असक्षम गर्नुहोस् $enable-grid-classes: falseर सेटिङद्वारा CSS ग्रिड सक्षम गर्नुहोस् $enable-cssgrid: true। त्यसपछि, आफ्नो Sass पुन: कम्पाइल गर्नुहोस्।
को उदाहरणहरू प्रतिस्थापन .rowगर्नुहोस् .grid। .gridकक्षाले तपाइँको HTML मार्फत निर्माण गर्ने एउटा सेट display: gridर सिर्जना गर्दछ ।grid-template
.col-*कक्षाहरू कक्षाहरूसँग बदल्नुहोस् .g-col-*। यो किनभने हाम्रो CSS ग्रिड स्तम्भहरूले grid-columnगुणको सट्टा प्रयोग गर्दछ width।
स्तम्भहरू र गटर आकारहरू CSS चरहरू मार्फत सेट गरिएका छन्। यसलाई अभिभावकमा सेट गर्नुहोस् .gridर आफूले चाहे अनुसार अनुकूलन गर्नुहोस्, इनलाइन वा स्टाइलसिटमा, --bs-columnsर सँग --bs-gap।

भविष्यमा, बुटस्ट्र्याप सम्भवतः हाइब्रिड समाधानमा परिवर्तन हुनेछ किनकि gapसम्पत्तीले फ्लेक्सबक्सको लागि लगभग पूर्ण ब्राउजर समर्थन प्राप्त गरेको छ।

मुख्य भिन्नताहरू

पूर्वनिर्धारित ग्रिड प्रणालीको तुलनामा:

फ्लेक्स उपयोगिताहरूले CSS ग्रिड स्तम्भहरूलाई समान रूपमा असर गर्दैन।
ग्याप्सले गटरहरू प्रतिस्थापन गर्दछ। gapसम्पत्तीले हाम्रो पूर्वनिर्धारित ग्रिड प्रणालीबाट तेर्सोलाई प्रतिस्थापन गर्दछ र paddingजस्तै कार्य गर्दछ margin।
जस्तै, s को विपरीत .row, .grids मा कुनै नकारात्मक मार्जिन छैन र मार्जिन उपयोगिताहरू ग्रिड गटरहरू परिवर्तन गर्न प्रयोग गर्न सकिँदैन। पूर्वनिर्धारित रूपमा ग्रिड अन्तरहरू तेर्सो र ठाडो रूपमा लागू गरिन्छ। थप विवरणहरूको लागि अनुकूलन खण्ड हेर्नुहोस् ।
style="--bs-columns: 3;"इनलाइन र अनुकूलन शैलीहरू परिमार्जक वर्गहरू (जस्तै, बनाम class="row-cols-3") को लागि प्रतिस्थापनको रूपमा हेर्नु पर्छ ।
नेस्टिङले समान रूपमा काम गर्दछ, तर तपाईंले नेस्टेडको प्रत्येक उदाहरणमा आफ्नो स्तम्भ गणनाहरू रिसेट गर्न आवश्यक हुन सक्छ .grid। विवरणका लागि नेस्टिङ खण्ड हेर्नुहोस्।

उदाहरणहरू

तीन स्तम्भहरू

.g-col-4सबै भ्यूपोर्टहरू र उपकरणहरूमा तीन समान-चौडाइ स्तम्भहरू कक्षाहरू प्रयोग गरेर सिर्जना गर्न सकिन्छ । भ्यूपोर्ट साइज अनुसार लेआउट परिवर्तन गर्न उत्तरदायी कक्षाहरू थप्नुहोस् ।

.g-col-4

html

<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>

उत्तरदायी

भ्यूपोर्टहरूमा आफ्नो लेआउट समायोजन गर्न उत्तरदायी कक्षाहरू प्रयोग गर्नुहोस्। यहाँ हामी साँघुरो भ्यूपोर्टहरूमा दुई स्तम्भहरूबाट सुरु गर्छौं, र त्यसपछि मध्यम भ्यूपोर्टहरू र माथिका तीन स्तम्भहरूमा बढ्छौं।

.g-col-6 .g-col-md-4

html

<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>

सबै दृश्यपोर्टहरूमा यो दुई स्तम्भ लेआउटसँग तुलना गर्नुहोस्।

.g-col-6

html

<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ग्रिड वस्तुहरू बीच तेर्सो र ठाडो अन्तरहरूमा लागू हुन्छ।

.g-col-6

html

<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

.g-col-3 .g-start-2

.g-col-4 .g-start-6

html

<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), प्रत्येक ग्रिड वस्तु स्वचालित रूपमा एक स्तम्भमा आकार हुनेछ।

१

html

<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>

यो व्यवहार ग्रिड स्तम्भ वर्ग संग मिश्रित गर्न सकिन्छ।

.g-col-6

१

html

<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>

नेस्टिङ

.gridहाम्रो पूर्वनिर्धारित ग्रिड प्रणाली जस्तै, हाम्रो CSS ग्रिडले s को सजिलो नेस्टिङको लागि अनुमति दिन्छ । यद्यपि, पूर्वनिर्धारित विपरीत, यो ग्रिडले पङ्क्तिहरू, स्तम्भहरू र खाली ठाउँहरूमा परिवर्तनहरू इनहेरिट गर्छ। तलको उदाहरणलाई विचार गर्नुहोस्:

हामी स्थानीय CSS चरको साथ स्तम्भहरूको पूर्वनिर्धारित संख्या ओभरराइड गर्छौं --bs-columns: 3:।
पहिलो स्वत: स्तम्भमा, स्तम्भ गणना इनहेरिट गरिएको छ र प्रत्येक स्तम्भ उपलब्ध चौडाइको एक तिहाइ हो।
दोस्रो स्वत: स्तम्भमा, हामीले नेस्टेडमा रहेको स्तम्भ गणनालाई .grid१२ (हाम्रो पूर्वनिर्धारित) मा रिसेट गरेका छौं।
तेस्रो स्वत: स्तम्भमा कुनै नेस्टेड सामग्री छैन।

अभ्यासमा यसले हाम्रो पूर्वनिर्धारित ग्रिड प्रणालीको तुलनामा थप जटिल र अनुकूलन लेआउटहरूको लागि अनुमति दिन्छ।

पहिलो स्वत: स्तम्भ

स्वत: स्तम्भ

दोस्रो स्वत: स्तम्भ

१२ मध्ये ६

१२ मध्ये ४

१२ मध्ये २

तेस्रो स्वत: स्तम्भ

html

<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 चरहरूको साथ स्तम्भहरूको संख्या, पङ्क्तिहरूको संख्या, र खाली ठाउँहरूको चौडाइ अनुकूलित गर्नुहोस्।

चर	फलब्याक मूल्य	विवरण
`--bs-rows`	`1`	तपाईंको ग्रिड टेम्प्लेटमा पङ्क्तिहरूको संख्या
`--bs-columns`	`12`	तपाईंको ग्रिड टेम्प्लेटमा स्तम्भहरूको संख्या
`--bs-gap`	`1.5rem`	स्तम्भहरू बीचको अन्तरको आकार (ठाडो र तेर्सो)

यी CSS चरहरूको कुनै पूर्वनिर्धारित मान छैन; बरु, तिनीहरूले फलब्याक मानहरू लागू गर्छन् जुन स्थानीय उदाहरण प्रदान नगरेसम्म प्रयोग गरिन्छ। उदाहरणका लागि, हामी var(--bs-rows, 1)हाम्रो CSS ग्रिड पङ्क्तिहरूका लागि प्रयोग गर्छौं, जसले बेवास्ता गर्छ --bs-rowsकिनभने त्यो अझै कतै सेट गरिएको छैन। एक पटक यो भएपछि, .gridउदाहरणले फलब्याक मानको सट्टा त्यो मान प्रयोग गर्नेछ 1।

कुनै ग्रिड कक्षाहरू छैनन्

तात्कालिक बालबालिका तत्वहरू ग्रिड वस्तुहरू हुन्, त्यसैले तिनीहरू स्पष्ट रूपमा कक्षा .gridथप नगरिकन आकार दिइनेछन् ।.g-col

स्वत: स्तम्भ

html

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

स्तम्भहरू र खाली ठाउँहरू

स्तम्भहरूको संख्या र खाली ठाउँ समायोजन गर्नुहोस्।

.g-col-2

html

<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>

.g-col-6

.g-col-4

html

<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>

पङ्क्तिहरू थप्दै

थप पङ्क्तिहरू थप्दै र स्तम्भहरूको स्थान परिवर्तन गर्दै:

स्वत: स्तम्भ

html

<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आवश्यकता अनुसार परिमार्जन गर्न सकिन्छ।

.g-col-6

html

<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 चर संग लागू गर्न सकिन्छ।

.g-col-6

html

<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) को मिश्रणको साथ आफ्नो "स्तम्भहरू" लाई आकार दिन सक्नुहुन्छ।

14 स्तम्भहरू

.g-col-4

html

<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>