ग्रिड प्रणाली

बाह्र स्तम्भ प्रणाली, छ पूर्वनिर्धारित उत्तरदायी तहहरू, Sass चर र मिक्सिनहरू, र दर्जनौं पूर्वनिर्धारित कक्षाहरूका लागि सबै आकार र आकारहरूको लेआउटहरू निर्माण गर्न हाम्रो शक्तिशाली मोबाइल-पहिलो फ्लेक्सबक्स ग्रिड प्रयोग गर्नुहोस्।

यस पृष्ठमा

उदाहरण

बुटस्ट्र्यापको ग्रिड प्रणालीले सामग्री लेआउट र पङ्क्तिबद्ध गर्न कन्टेनरहरू, पङ्क्तिहरू र स्तम्भहरूको श्रृंखला प्रयोग गर्दछ। यो flexbox संग निर्मित छ र पूर्ण उत्तरदायी छ। तल एउटा उदाहरण र ग्रिड प्रणाली कसरी सँगै आउँछ भन्ने बारे विस्तृत व्याख्या छ।

flexbox मा नयाँ वा अपरिचित? पृष्ठभूमि, शब्दावली, दिशानिर्देशहरू, र कोड स्निपेटहरूको लागि यो CSS ट्रिक्स फ्लेक्सबक्स गाइड पढ्नुहोस् ।

स्तम्भ

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

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

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

यसलाई तोड्दै, यहाँ कसरी ग्रिड प्रणाल�� सँगै आउँछ:

हाम्रो ग्रिडले छ वटा उत्तरदायी ब्रेकपोइन्टहरूलाई समर्थन गर्दछ । ब्रेकपोइन्टहरू मिडिया प्रश्नहरूमा आधारित हुन्छन् min-width, यसको मतलब तिनीहरूले त्यो ब्रेकपोइन्ट र त्यसमाथिका सबैलाई असर गर्छ (उदाहरणका लागि , , , , र ) मा .col-sm-4लागू हुन्छ । यसको मतलब तपाइँ प्रत्येक ब्रेकपोइन्ट द्वारा कन्टेनर र स्तम्भ आकार र व्यवहार नियन्त्रण गर्न सक्नुहुन्छ।smmdlgxlxxl
कन्टेनरहरू बीचमा र तेर्सो रूपमा तपाईंको सामग्री प्याड गर्नुहोस्। .containerप्रतिक्रियाशील पिक्सेल चौडाइको लागि .container-fluid, width: 100%सबै भ्यूपोर्टहरू र यन्त्रहरूमा, वा .container-mdतरल पदार्थ र पिक्सेल चौडाइहरूको संयोजनको लागि प्रतिक्रियाशील कन्टेनर (जस्तै, ) को लागि प्रयोग गर्नुहोस्।
पङ्क्तिहरू स्तम्भहरूको लागि र्यापरहरू हुन्। प्रत्येक स्तम्भमा तेर्सो paddingहुन्छ (जसलाई नाली भनिन्छ) तिनीहरू बीचको ठाउँ नियन्त्रण गर्नका लागि। त्यसपछि तपाइँको paddingस्तम्भहरूमा सामग्री बायाँ छेउमा भिजुअल रूपमा पङ्क्तिबद्ध छ भनेर सुनिश्चित गर्न नकारात्मक मार्जिनहरूका साथ पङ्क्तिहरूमा प्रतिवाद गरिन्छ। पङ्क्तिहरूले तपाईंको सामग्रीको स्पेसिङ परिवर्तन गर्न स्तम्भ आकार र गटर वर्गहरू समान रूपमा लागू गर्न परिमार्जक वर्गहरूलाई समर्थन गर्दछ।
स्तम्भहरू अविश्वसनीय लचिलो छन्। त्यहाँ प्रति पङ्क्तिमा 12 टेम्प्लेट स्तम्भहरू उपलब्ध छन्, तपाईंलाई तत्वहरूको विभिन्न संयोजनहरू सिर्जना गर्न अनुमति दिन्छ जुन स्तम्भहरूको संख्यामा फैलिन्छ। स्तम्भ वर्गहरूले स्प्यान गर्न टेम्प्लेट स्तम्भहरूको संख्या संकेत गर्दछ (जस्तै, col-4चार स्प्यान्स)। widths प्रतिशतमा सेट गरिएको छ त्यसैले तपाईसँग सधैं समान सापेक्ष आकार हुन्छ।
गटरहरू पनि उत्तरदायी र अनुकूलन योग्य छन्। गटर कक्षाहरू सबै ब्रेकपोइन्टहरूमा उपलब्ध छन्, हाम्रो मार्जिन र प्याडिङ स्पेसिङको रूपमा सबै समान आकारहरूका साथ । तेर्सो नालीहरू .gx-*कक्षाहरू, ठाडो नालीहरू .gy-*, वा .g-*कक्षाहरू भएका सबै गटरहरू परिवर्तन गर्नुहोस्। .g-0गटर हटाउन पनि उपलब्ध छ।
Sass चरहरू, नक्साहरू, र मिक्सिनहरूले ग्रिडलाई शक्ति दिन्छ। यदि तपाइँ Bootstrap मा पूर्वनिर्धारित ग्रिड कक्षाहरू प्रयोग गर्न चाहनुहुन्न भने, तपाइँ हाम्रो ग्रिडको स्रोत Sass प्रयोग गर्न सक्नुहुन्छ थप अर्थ मार्कअपको साथ तपाइँको आफ्नै सिर्जना गर्न। हामीले तपाईंको लागि अझ बढी लचिलोपनको लागि यी Sass चरहरू उपभोग गर्न केही CSS अनुकूलन गुणहरू पनि समावेश गर्दछौं।

फ्लेक्सबक्स वरपरका सीमितताहरू र बगहरू बारे सचेत रहनुहोस् , जस्तै फ्लेक्स कन्टेनरहरूको रूपमा केही HTML तत्वहरू प्रयोग गर्न असक्षमता ।

ग्रिड विकल्पहरू

बुटस्ट्र्यापको ग्रिड प्रणालीले सबै छवटा पूर्वनिर्धारित ब्रेकपोइन्टहरू, र तपाईंले अनुकूलन गर्ने कुनै पनि ब्रेकपोइन्टहरूमा अनुकूलन गर्न सक्छ। छ पूर्वनिर्धारित ग्रिड तहहरू निम्नानुसार छन्:

अतिरिक्त सानो (xs)
सानो (sm)
मध्यम (md)
ठूलो (lg)
अतिरिक्त ठूलो (xl)
अतिरिक्त अतिरिक्त ठूलो (xxl)

माथि उल्लेख गरिए अनुसार, यी प्रत्येक ब्रेकपोइन्टको आफ्नै कन्टेनर, अद्वितीय वर्ग उपसर्ग, र परिमार्जकहरू छन्। यी ब्रेकपोइन्टहरूमा ग्रिड कसरी परिवर्तन हुन्छ यहाँ छ:

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
कन्टेनर`max-width`	कुनै पनि छैन (स्वचालित)	540px	720px	960px	1140px	1320px
कक्षा उपसर्ग	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
स्तम्भहरूको #	१२
नाली चौडाइ	1.5rem (.75rem बाँया र दायाँ)
कस्टम गटरहरू	हो
नेस्टेबल	हो
स्तम्भ क्रम	हो

स्वत: लेआउट स्तम्भहरू

स्तम्भको आकारको लागि स्पष्ट संख्याको वर्ग बिना नै ब्रेकपोइन्ट-विशिष्ट स्तम्भ वर्गहरू प्रयोग गर्नुहोस् .col-sm-6।

बराबर चौडाइ

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

२ मध्ये १

२ मध्ये २

३ मध्ये १

३ मध्ये २

३ मध्ये ३

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

एक स्तम्भ चौडाइ सेट गर्दै

फ्लेक्सबक्स ग्रिड स्तम्भहरूको लागि स्वत: लेआउटको मतलब यो पनि हो कि तपाईंले एउटा स्तम्भको चौडाइ सेट गर्न सक्नुहुन्छ र भाइबहिनी स्तम्भहरू स्वचालित रूपमा यसको वरिपरि रिसाइज गर्न सक्नुहुन्छ। तपाईंले पूर्वनिर्धारित ग्रिड वर्गहरू (तल देखाइए अनुसार), ग्रिड मिक्सिन वा इनलाइन चौडाइहरू प्रयोग गर्न सक्नुहुन्छ। ध्यान दिनुहोस् कि अन्य स्तम्भहरूले केन्द्र स्तम्भको चौडाइलाई फरक पार्दैन।

३ मध्ये १

३ मध्ये २ (फडा)

३ मध्ये ३

३ मध्ये १

३ मध्ये २ (फडा)

३ मध्ये ३

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

चर चौडाइ सामग्री

col-{breakpoint}-autoतिनीहरूको सामग्रीको प्राकृतिक चौडाइमा आधारित स्तम्भहरूलाई आकार दिन कक्षाहरू प्रयोग गर्नुहोस्।

३ मध्ये १

चर चौडाइ सामग्री

३ मध्ये ३

३ मध्ये १

चर चौडाइ सामग्री

३ मध्ये ३

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

उत्तरदायी कक्षाहरू

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

सबै ब्रेकपोइन्टहरू

ग्रिडहरूका लागि जुन यन्त्रहरूको सबैभन्दा सानो देखि ठूलासम्म समान छन्, .colर .col-*वर्गहरू प्रयोग गर्नुहोस्। जब तपाईलाई विशेष आकारको स्तम्भ चाहिन्छ एक नम्बर गरिएको वर्ग निर्दिष्ट गर्नुहोस्; अन्यथा, अडिग रहन नहिचकिचाउनुहोस् .col।

कर्नल

col-8

col-4

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

तेर्सोमा स्ट्याक गरियो

कक्षाहरूको एकल सेट प्रयोग गरेर .col-sm-*, तपाईंले एउटा आधारभूत ग्रिड प्रणाली सिर्जना गर्न सक्नुहुन्छ जुन स्ट्याक गरिएको सुरु हुन्छ र सानो ब्रेकपोइन्ट ( sm) मा तेर्सो हुन्छ।

col-sm-8

col-sm-4

col-sm

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

मिक्स र मिलाउनुहोस्

तपाइँका स्तम्भहरू केवल केहि ग्रिड तहहरूमा स्ट्याक गर्न चाहनुहुन्न? आवश्यकता अनुसार प्रत्येक तहको लागि विभिन्न वर्गहरूको संयोजन प्रयोग गर्नुहोस्। यो सबै कसरी काम गर्दछ भन्ने राम्रो विचारको लागि तलको उदाहरण हेर्नुहोस्।

col-md-8

.col-6 .col-md-4

col-6

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

पङ्क्ति स्तम्भहरू

.row-cols-*तपाईंको सामग्री र लेआउटलाई उत्कृष्ट रूपमा प्रस्तुत गर्ने स्तम्भहरूको संख्या द्रुत रूपमा सेट गर्न उत्तरदायी कक्षाहरू प्रयोग गर्नुहोस्। जहाँ सामान्य .col-*वर्गहरू व्यक्तिगत स्तम्भहरूमा लागू हुन्छन् (जस्तै, .col-md-4), पङ्क्ति स्तम्भ वर्गहरू .rowसमावेश गरिएका स्तम्भहरूको लागि पूर्वनिर्धारित रूपमा अभिभावकमा सेट हुन्छन्। .row-cols-autoतपाईं स्तम्भहरूलाई तिनीहरूको प्राकृतिक चौडाइ दिन सक्नुहुन्छ ।

आधारभूत ग्रिड लेआउटहरू तुरुन्तै सिर्जना गर्न वा तपाईंको कार्ड लेआउटहरू नियन्त्रण गर्न र स्तम्भ स्तरमा आवश्यक पर्दा ओभरराइड गर्न यी पङ्क्ति स्तम्भ वर्गहरू प्रयोग गर्नुहोस्।

स्तम्भ

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

स्तम्भ

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

स्तम्भ

<div class="container">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

स्तम्भ

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

स्तम्भ

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

स्तम्भ

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

स्तम्भ

<div class="container">
  <div class="row row-cols-2 row-cols-lg-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
  </div>
</div>

तपाईं पनि साथमा Sass mixin प्रयोग गर्न सक्नुहुन्छ row-cols(),:

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

नेस्टिङ

तपाईंको सामग्रीलाई पूर्वनिर्धारित ग्रिडसँग नेस्ट गर्न, अवस्थित स्तम्भ भित्र नयाँ .rowर स्तम्भहरूको सेट थप्नुहोस् । नेस्ट गरिएका पङ्क्तिहरूले स्तम्भहरूको सेट समावेश गर्नुपर्छ जसले १२ वा सोभन्दा कम थप्छन् (तपाईले सबै उपलब्ध १२ स्तम्भहरू प्रयोग गर्नु आवश्यक छैन)।.col-sm-*.col-sm-*

स्तर 1: .col-sm-3

स्तर 2: .col-8 .col-sm-6

स्तर 2: .col-4 .col-sm-6

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

सास

बुटस्ट्र्यापको स्रोत सास फाइलहरू प्रयोग गर्दा, तपाईंसँग अनुकूलन, अर्थपूर्ण, र उत्तरदायी पृष्ठ लेआउटहरू सिर्जना गर्न Sass चर र मिक्सिनहरू प्रयोग गर्ने विकल्प छ। हाम्रो पूर्वनिर्धारित ग्रिड वर्गहरूले द्रुत प्रतिक्रियाशील लेआउटहरूको लागि प्रयोग गर्न-का लागि तयार कक्षाहरूको सम्पूर्ण सूट प्रदान गर्न यी समान चरहरू र मिक्सिनहरू प्रयोग गर्छन्।

चरहरू

चर र नक्साहरूले स्तम्भहरूको संख्या, नालीको चौडाइ, र मिडिया क्वेरी बिन्दुमा फ्लोटिंग स्तम्भहरू सुरु गर्ने निर्धारण गर्दछ। हामी माथि उल्लेखित पूर्वनिर्धारित ग्रिड वर्गहरू उत्पन्न गर्न प्रयोग गर्छौं, साथै तल सूचीबद्ध अनुकूलन मिक्सनहरूको लागि।

$grid-columns:      12;
$grid-gutter-width: 1.5rem;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

मिक्सन

व्यक्तिगत ग्रिड स्तम्भहरूको लागि सिमान्टिक CSS उत्पन्न गर्न ग्रिड चरहरूसँग संयोजनमा मिक्सिनहरू प्रयोग गरिन्छ।

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

उदाहरण प्रयोग

तपाइँ चरहरूलाई तपाइँको आफ्नै अनुकूल मानहरूमा परिमार्जन गर्न सक्नुहुन्छ, वा केवल तिनीहरूको पूर्वनिर्धारित मानहरूसँग मिक्सिनहरू प्रयोग गर्नुहोस्। बीचको अन्तरको साथ दुई-स्तम्भ लेआउट सिर्जना गर्न पूर्वनिर्धारित सेटिङहरू प्रयोग गर्ने उदाहरण यहाँ छ।

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

मुख्य सामग्री

माध्यमिक सामग्री

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

ग्रिड अनुकूलन गर्दै

हाम्रो निर्मित ग्रिड Sass चर र नक्साहरू प्रयोग गरेर, पूर्वनिर्धारित ग्रिड वर्गहरूलाई पूर्ण रूपमा अनुकूलन गर्न सम्भव छ। टियरहरूको संख्या, मिडिया क्वेरी आयामहरू, र कन्टेनर चौडाइहरू परिवर्तन गर्नुहोस् - त्यसपछि पुन: कम्पाइल गर्नुहोस्।

स्तम्भ र गटरहरू

ग्रिड स्तम्भहरूको संख्या Sass चर मार्फत परिमार्जन गर्न सकिन्छ। $grid-columnsप्रत्येक व्यक्तिगत स्तम्भको चौडाइ (प्रतिशतमा) उत्पन्न गर्न प्रयोग गरिन्छ जबकि $grid-gutter-widthस्तम्भ गटरहरूको चौडाइ सेट गर्दछ।

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;

ग्रिड तहहरू

स्तम्भहरू भन्दा बाहिर जाँदै, तपाईंले ग्रिड तहहरूको संख्या पनि अनुकूलन गर्न सक्नुहुन्छ। यदि तपाइँ केवल चार ग्रिड तहहरू चाहनुहुन्छ भने, तपाइँ अपडेट गर्नुहुनेछ $grid-breakpointsर $container-max-widthsयो जस्तै केहि:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

When making any changes to the Sass variables or maps, you’ll need to save your changes and recompile. Doing so will output a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in px (not rem, em, or %).